说明
玩转 webpack 学习笔记
可选方案
- thread-loader
- parallel-webpack
- HappyPack
使用 HappyPack 解析资源
原理：每次 webapck 解析一个模块，HappyPack 会将它及它的依赖分配给 worker 线程中
代码示例：
exports.plugins = [ new HappyPack({ id: 'jsx', threads: 4, loaders: ['babel-loader'] })， new HappyPack({ id: 'styles', threads: 2, loaders: ['style-loader', 'css-loader', 'less-loader'] }) ]
HappyPack 工作流程：
使用 thread-loader 解析资源
原理：每次 webpack 解析一个模块，threadloader 会将它及它的依赖分配给 worker 线程中
module.exports = smp.wrap({ entry: entry, output: { path: path.join(_ dirname, 'dist'), filename: '[name ]_[chunkhash:8].js' }， mode: 'production', module: { rules: [ { test: /.js$/, use: [ { loader: ' thread- loader', options: { workers: 3 } }, ' babel- loader', // 'eslint- loader' ] }, ] } }
实战使用 happypack
https://github.com/amireh/happypack
安装
npm install --save-dev happypack
在使用之前我们先增加一些页面，提升效果更明显
然后在运行打包命令 npm run build
接下来使用 happypack
const HappyPack = require('happypack'); exports.module = { rules: [ { test: /.js$/, // 1) replace your original list of loaders with "happypack/loader": // loaders: [ 'babel-loader?presets[]=es2015' ], use: 'happypack/loader', include: [ /* ... */ ], exclude: [ /* ... */ ] } ] }; exports.plugins = [ // 2) create the plugin: new HappyPack({ // 3) re-add the loaders you replaced above in #1: loaders: ['babel-loader'] }) ];
然后在运行打包命令 npm run build，我们可以看到有 3 个线程
可以看到时间有了明显的下降
实战使用 thread-loader
注释掉 happypack 的代码，安装依赖：https://github.com/webpack-contrib/thread-loader
npm install --save-dev thread-loader
use: [ { loader: 'thread-loader', options: { workers: 3 } }, 'babel-loader', // 'happypack/loader', // 'eslint-loader' ]
然后在运行打包命令 npm run build，我们发现时间也有了明显的下降，
