webpack 性能优化（3）happypack多线程打包

使用 happypack 模块进行多线程打包，适用于文件较大的情况，本身启动多线程需要耗费时间

安装 happypack

powershell

yarn add happypack -D

修改配置文件，实现多线程打包 js 和 css

Javascript

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
// 多线程打包
let Happypack = require('happypack')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve('dist')
  },
  devServer: {
    port: 3000,
    contentBase: './dist'
  },
  mode: 'development',
  module: {
    noParse: /jquery/, // jquery 独立的库，没有依赖，不去解析
    rules: [
      {
        test: /\.js$/, // \代表转义
        include: path.resolve('src'), // 
        exclude: /node_modules/,
        use: 'Happypack/loader?id=js'
      },
      {
        test: /\.css$/,
        use: 'Happypack/loader?id=css'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',

    }),
    new webpack.IgnorePlugin(/\.\/locale/, /moment/),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, 'dist', 'manifest.json')
    }),
    new Happypack({
      id: 'js',
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      ]
    }),
    new Happypack({
      id: 'css',
      use: ['style-loader', 'css-loader']
    })
  ],
}

use: 'Happypack/loader?id=js'，表示使用 id:'js'的 happypack 实例进行打包