2021-03-17

1. 优化 Loader
   优化 Loader 的文件搜索范围

module.exports = {
  module: {
    rules: [
      {
        // js 文件才使用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的路径
        exclude: /node_modules/
      }
    ]
  }
}

将 Babel 编译过的文件缓存

	loader: 'babel-loader?cacheDirectory=true'

2. HappyPack
   由于 Webpack 在打包的过程中是单线程的，在执行 Loader 的时候，长时间编译的任务很多，这样就会导致等待的情况，而HappyPack 可以将 Loader 的同步执行转换为并行的，这样就能充分利用系统资源来加快打包效率

module: {
  loaders: [
    { 
    	...
      // id 后面的内容对应下面
      loader: 'happypack/loader?id=happypack'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happypack',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]