Open artdong opened 4 years ago
由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。
由于运行在 Node.js 之上的 Webpack 是单线程模型
的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做。
我们需要Webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力,HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程
。
HappyPack makes initial webpack builds faster by transforming files in parallel(HappyPack通过并行转换文件使webpack编译更快)。
future:Webpack 4 and thread-loader
npm install --save-dev happypack
const os = require('os');
const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
const happypackClients = [
new HappyPack({
id: 'js',
loaders: ['babel-loader'],
threadPool: happyThreadPool
}),
new HappyPack({
id: 'jsx',
loaders: [{
loader: 'babel-loader',
query: {
presets: ['react']
}
}],
threadPool: happyThreadPool
}),
new HappyPack({
id: 'styles',
loaders: ['css-loader', 'less-loader'],
threadPool: happyThreadPool
})
];
module.exports = {
entry: './app/build/app.jsx',
output: {
path: path.resolve(__dirname, './app/public/static/' + pkg.name + '/'),
filename: 'app.[chunkhash:8].min.js',
chunkFilename: 'chunk.[name].[chunkhash:8].min.js',
publicPath: '/' + pkg.name + '/'
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'happypack/loader?id=js'
},
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'happypack/loader?id=jsx'
},
{
test: /\.(less|css)$/,
use: ExtractTextPlugin.extract({
use: ['happypack/loader?id=styles']
})
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': env
}
}),
new HtmlWebpackPlugin({
inject: false,
filename: '../../views/index.html',
template: './app/build/views/index.html'
}),
...happypackClients,
extractLESS
]
};
用过HappyPack吗?HappyPack有什么优点?