webpack HappyPack實戰詳解

 更新時間:2019年10月08日 09:43:46   作者:大飯團CC   我要評論
這篇文章主要介紹了webpack HappyPack實戰詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

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

我們需要Webpack 能同一時間處理多個任務,發揮多核 CPU 電腦的威力,HappyPack 就能讓 Webpack 做到這點,它把任務分解給多個子進程去并發的執行,子進程處理完后再把結果發送給主進程。

由于 JavaScript 是單線程模型,要想發揮多核 CPU 的能力,只能通過多進程去實現,而無法通過多線程實現。

提示:由于HappyPack 對file-loader、url-loader 支持的不友好,所以不建議對該loader使用。

安裝 HappyPack

npm i -D happypack

運行機制

使用 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$/,
    //把對.js 的文件處理交給id為happyBabel 的HappyPack 的實例執行
    loader: 'happypack/loader?id=happyBabel',
    //排除node_modules 目錄下的文件
    exclude: /node_modules/
   },
  ]
 },
plugins: [
  new HappyPack({
    //用id來標識 happypack處理那里類文件
   id: 'happyBabel',
   //如何處理 用法和loader 的配置一樣
   loaders: [{
    loader: 'babel-loader?cacheDirectory=true',
   }],
   //共享進程池
   threadPool: happyThreadPool,
   //允許 HappyPack 輸出日志
   verbose: true,
  })
 ]
}

  1. 在 Loader 配置中,所有文件的處理都交給了 happypack/loader 去處理,使用緊跟其后的 querystring ?id=babel 去告訴 happypack/loader 去選擇哪個 HappyPack 實例去處理文件。
  2. 在 Plugin 配置中,新增了兩個 HappyPack 實例分別用于告訴 happypack/loader 去如何處理 .js 和 .css 文件。選項中的 id 屬性的值和上面 querystring 中的 ?id=babel 相對應,選項中的 loaders 屬性和 Loader 配置中一樣。

HappyPack 參數

  • id: String 用唯一的標識符 id 來代表當前的 HappyPack 是用來處理一類特定的文件.
  • loaders: Array 用法和 webpack Loader 配置中一樣.
  • threads: Number 代表開啟幾個子進程去處理這一類型的文件,默認是3個,類型必須是整數。
  • verbose: Boolean 是否允許 HappyPack 輸出日志,默認是 true。
  • threadPool: HappyThreadPool 代表共享進程池,即多個 HappyPack 實例都使用同一個共享進程池中的子進程去處理任務,以防止資源占用過多。
  • verboseWhenProfiling: Boolean 開啟webpack --profile ,仍然希望HappyPack產生輸出。
  • debug: Boolean 啟用debug 用于故障排查。默認 false。

總結

如果想詳細了解happypack的原理 可以看這篇文章
happypack 原理解析

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • JS實現的字符串數組去重功能小結

    JS實現的字符串數組去重功能小結

    這篇文章主要介紹了JS實現的字符串數組去重功能,結合實例形式分析了javascript基于ES6、ES5、ES3及正則實現數組去重的相關操作技巧,需要的朋友可以參考下
    2019-06-06
  • js判斷一個字符串是否包含一個子串的方法

    js判斷一個字符串是否包含一個子串的方法

    這篇文章主要介紹了js判斷一個字符串是否包含一個子串的方法,實例分析了判斷的技巧與第三方腳本的使用方法,需要的朋友可以參考下
    2015-01-01
  • 微信小程序仿美團城市選擇

    微信小程序仿美團城市選擇

    這篇文章主要為大家詳細介紹了微信小程序仿美團城市選擇,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-06-06
  • 淺談js中變量初始化

    淺談js中變量初始化

    這篇文章主要介紹了淺談js中變量初始化的相關資料,需要的朋友可以參考下
    2015-02-02
  • es7學習教程之fetch解決異步嵌套問題的方法示例

    es7學習教程之fetch解決異步嵌套問題的方法示例

    這篇文章主要給大家介紹了關于es7學習教程之fetch解決異步嵌套問題的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-07-07
  • 全面總結Javascript對數組對象的各種操作

    全面總結Javascript對數組對象的各種操作

    最近有個同事問了個問題,關于數組,對象和類數組的,仔細說起來都是基礎,其實都沒什么好講的,不過看到還是有很多朋友有些迷糊,決定還是寫出來吧,下面這篇文章主要給大家介紹了Javascript對數組對象的各種操作,需要的朋友可以參考借鑒。
    2017-01-01
  • 微信小程序之幾種常見的彈框提示信息實現詳解

    微信小程序之幾種常見的彈框提示信息實現詳解

    這篇文章主要介紹了微信小程序之幾種常見的彈框提示信息實現詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-07-07
  • D3.js實現雷達圖的方法詳解

    D3.js實現雷達圖的方法詳解

    大家應該都知道基本圖表一共有六種,分別是柱狀圖、折線圖、散點圖、氣泡圖、餅圖和雷達圖。前面五種圖形都已經介紹過如何實現了,今天我們一起來看看最后的雷達圖。有需要的朋友們可以參考學習下。
    2016-09-09
  • js時間戳與日期格式之間轉換詳解

    js時間戳與日期格式之間轉換詳解

    這篇文章主要為大家詳細介紹了js時間戳與日期格式之間轉換,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-12-12
  • 原生js實現tab選項卡切換

    原生js實現tab選項卡切換

    這篇文章主要為大家詳細介紹了原生js實現tab選項卡,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-08-08

最新評論

码报108