20、webpack happypack多线程打包

webpack happypack 多线程打包，当工程比较大的时候可以使用多线程打包

操作步骤:

• 1、安装happypack插件

 yarn add happypack

• 2、配置

// 导入多线程打包
let Happypack = require('happypack')
//
module.exports = {
  plugins: [
    // js声明多线程打包
        new Happypack({
            id: 'js',
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            ]
        }),
        //css 多线程打包
        new Happypack({
            id: 'css',
            use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
        })
  ],
  module: {
     // loader
        rules: [
            {
                test: /\.css$/, //匹配css文件
                use: 'Happypack/loader?id=css'
            },
            {
                test: /\.less$/, //匹配less文件
                use: 'Happypack/loader?id=css'
            },
            {
                test: /\.js$/, //匹配js文件
                use: 'Happypack/loader?id=js'
            }
        ]
  }
}

完整案例：

build/webpack.base.config.js

// 开发和生成模式共同的配置
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
//
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
//
let webpack = require('webpack');
// 导入多线程打包
let Happypack = require('happypack')
// webpack相关配置
module.exports = {
    // 入口,表示从哪里开始打包
    entry: {
        home: './src/index.js'
    }, 
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名 多入口根据入口名称生成
        filename: 'build.js',  
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, '../dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html'
        }),
        // 抽离css为单独文件
        new MiniCssExtractPlugin({
            filename: 'main.css'
        }),
        // js声明多线程打包
        new Happypack({
            id: 'js',
            use: [
                {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            ]
        }),
        //css 多线程打包
        new Happypack({
            id: 'css',
            use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
        })
    ],
    //
    resolve: {
        // 解析三方库文件
        //modules: [ path.resolve('node_modules') ],
        // 扩展名
        extensions: ['.js', '.css', '.json', '.vue'],
        // 定义路径别名
        alias: {
            '@': path.resolve('src')
        }
    },
    module: {
        // loader
        rules: [
            {
                test: /\.css$/, //匹配css文件
                use: 'Happypack/loader?id=css'
            },
            {
                test: /\.less$/, //匹配less文件
                use: 'Happypack/loader?id=css'
            },
            {
                test: /\.js$/, //匹配js文件
                use: 'Happypack/loader?id=js'
            }
        ]
     }
}