HappyPack的示例分析

這篇文章主要介紹HappyPack的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

浦江網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,浦江網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為浦江上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的浦江做網(wǎng)站的公司定做！

由于運(yùn)行在 Node.js 之上的 Webpack 是單線程模型的，所以Webpack 需要處理的事情需要一件一件的做，不能多件事一起做。

我們需要Webpack 能同一時(shí)間處理多個(gè)任務(wù)，發(fā)揮多核 CPU 電腦的威力，HappyPack 就能讓 Webpack 做到這點(diǎn)，它把任務(wù)分解給多個(gè)子進(jìn)程去并發(fā)的執(zhí)行，子進(jìn)程處理完后再把結(jié)果發(fā)送給主進(jìn)程。

由于 JavaScript 是單線程模型，要想發(fā)揮多核 CPU 的能力，只能通過多進(jìn)程去實(shí)現(xiàn)，而無法通過多線程實(shí)現(xiàn)。

提示：由于HappyPack 對(duì)file-loader、url-loader 支持的不友好，所以不建議對(duì)該loader使用。

安裝 HappyPack

npm i -D happypack

運(yùn)行機(jī)制

使用 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來標(biāo)識(shí) happypack處理那里類文件
   id: 'happyBabel',
   //如何處理 用法和loader 的配置一樣
   loaders: [{
    loader: 'babel-loader?cacheDirectory=true',
   }],
   //共享進(jìn)程池
   threadPool: happyThreadPool,
   //允許 HappyPack 輸出日志
   verbose: true,
  })
 ]
}

1. 在 Loader 配置中，所有文件的處理都交給了 happypack/loader 去處理，使用緊跟其后的 querystring ?id=babel 去告訴 happypack/loader 去選擇哪個(gè) HappyPack 實(shí)例去處理文件。

2. 在 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 來代表當(dāng)前的 HappyPack 是用來處理一類特定的文件.

• loaders: Array 用法和 webpack Loader 配置中一樣.

• threads: Number 代表開啟幾個(gè)子進(jìn)程去處理這一類型的文件，默認(rèn)是3個(gè)，類型必須是整數(shù)。

• verbose: Boolean 是否允許 HappyPack 輸出日志，默認(rèn)是 true。

• threadPool: HappyThreadPool 代表共享進(jìn)程池，即多個(gè) HappyPack 實(shí)例都使用同一個(gè)共享進(jìn)程池中的子進(jìn)程去處理任務(wù)，以防止資源占用過多。

• verboseWhenProfiling: Boolean 開啟webpack --profile ,仍然希望HappyPack產(chǎn)生輸出。

• debug: Boolean 啟用debug 用于故障排查。默認(rèn) false。

以上是“HappyPack的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：HappyPack的示例分析
文章出自：http://bm7419.com/article38/pcecsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、做網(wǎng)站、靜態(tài)網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)