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'            }        ]     }}