由于運(yùn)行在 Node.js 之上的 Webpack 是單線(xiàn)程模型的，所以Webpack 需要處理的事情需要一件一件的做翎苫，不能多件事一起做师脂。
我們需要Webpack 能同一時(shí)間處理多個(gè)任務(wù)乡数，發(fā)揮多核 CPU 電腦的威力晚唇，HappyPack 就能讓 Webpack 做到這點(diǎn)，它把任務(wù)分解給多個(gè)子進(jìn)程去并發(fā)的執(zhí)行，子進(jìn)程處理完后再把結(jié)果發(fā)送給主進(jìn)程酱塔。
由于 JavaScript 是單線(xiàn)程模型沥邻，要想發(fā)揮多核 CPU 的能力，只能通過(guò)多進(jìn)程去實(shí)現(xiàn)羊娃，而無(wú)法通過(guò)多線(xiàn)程實(shí)現(xiàn)谋国。
提示：由于HappyPack 對(duì)file-loader、url-loader 支持的不友好迁沫，所以不建議對(duì)該loader使用芦瘾。
安裝 HappyPack
npm i -D happypack
運(yùn)行機(jī)制
HappyPack_Workflow.png
使用 HappyPack
修改你的webpack.config.js 文件
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
module: {
rules: [
{
test: /\.js$/,
//把對(duì).js 的文件處理交給id為happyBabel 的HappyPack 的實(shí)例執(zhí)行
loader: 'happypack/loader?id=happyBabel',
//排除node_modules 目錄下的文件
exclude: /node_modules/
},
]
},
plugins: [
new HappyPack({
//用id來(lái)標(biāo)識(shí) happypack處理那里類(lèi)文件
id: 'happyBabel',
//如何處理 用法和loader 的配置一樣
loaders: [{
loader: 'babel-loader?cacheDirectory=true',
}],
//共享進(jìn)程池
threadPool: happyThreadPool,
//允許 HappyPack 輸出日志
verbose: true,
})
]
}
- 在 Loader 配置中，所有文件的處理都交給了
happypack/loader去處理集畅，使用緊跟其后的 querystring?id=babel去告訴happypack/loader去選擇哪個(gè) HappyPack 實(shí)例去處理文件近弟。 - 在 Plugin 配置中，新增了兩個(gè) HappyPack 實(shí)例分別用于告訴
happypack/loader去如何處理 .js 和 .css 文件挺智。選項(xiàng)中的id屬性的值和上面 querystring 中的?id=babel相對(duì)應(yīng)祷愉，選項(xiàng)中的 loaders 屬性和 Loader 配置中一樣。
HappyPack 參數(shù)
-
id: String用唯一的標(biāo)識(shí)符 id 來(lái)代表當(dāng)前的 HappyPack 是用來(lái)處理一類(lèi)特定的文件. -
loaders: Array用法和 webpack Loader 配置中一樣. -
threads: Number代表開(kāi)啟幾個(gè)子進(jìn)程去處理這一類(lèi)型的文件赦颇，默認(rèn)是3個(gè)二鳄，類(lèi)型必須是整數(shù)。 -
verbose: Boolean是否允許 HappyPack 輸出日志媒怯，默認(rèn)是 true订讼。 -
threadPool: HappyThreadPool代表共享進(jìn)程池，即多個(gè) HappyPack 實(shí)例都使用同一個(gè)共享進(jìn)程池中的子進(jìn)程去處理任務(wù)扇苞，以防止資源占用過(guò)多欺殿。 -
verboseWhenProfiling: Boolean開(kāi)啟webpack --profile,仍然希望HappyPack產(chǎn)生輸出。 -
debug: Boolean啟用debug 用于故障排查鳖敷。默認(rèn)false脖苏。
總結(jié)
如果想詳細(xì)了解happypack的原理 可以看這篇文章
happypack 原理解析
