你真的熟練使用webpack嗎？

• https://www.webpackjs.com/ 官網地址

當本身在簡歷中寫着熟練使用webpack的時候，卻不知本身只是在vue腳手架，react腳手架的路上走着比較輕鬆而已。

當面試官問你這幾個問題的時候，你還能從容答上來嗎(高手請忽略)

• 什麼是webpack，webpack的打包過程是怎麼樣的？
• webpack基礎配置的屬性有哪些
• 什麼是loader?什麼是plugin?他們執行前後關係是什麼？
• 提升webpack的構建速度(這個比較普遍)
• 是否本身寫過plugin(一旦你回答寫過，立刻問題就來了)
• 是否用過compiler ，介紹其中幾個方法？

正文

先拋開這幾個問題。談談本人正常學習webpack的過程，因爲幾年前先接觸的vue，一套vue-cli跑下來 ，生成demo之後感受本身不只

學會了vue，還精通了webpack。

後面有個偶然的機會，想本身從頭使用webpack部署。才知道里面沒有那麼簡單。

這裏有個參考的文章:

入門Webpack，看這篇就夠了。

感興趣的能夠本身看。

webpack的打包過程是怎麼樣的

這個當本身實踐着一步步去嘗試開始的時候的，會有個比較清晰的理解的。

webpack是一個打包模塊化javascript的工具，在webpack裏一切文件皆模塊，

經過loader轉換文件，經過plugin注入鉤子，最後輸出由多個模塊組合成的文件，

webpack專一構建模塊化項目。

webpack基礎配置的屬性有哪些

• 入口(entry)
• 輸出(output)
• loader
• 插件(plugins)

固然在實際工程中，看到的的webpack的配置屬性遠遠沒有這麼簡單。

好比：咱們會環境配置。dev,pro等等。

可能會使用到代理配置:相似於下面代碼所示，用來進行跨域配置

proxyTable: {
      '/api': {
        target: 'http://……………………',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      },
 }

每一個屬性的配置均可以延伸開，好比入口，能夠是單入口，也能夠是多入口。

一旦用到具體的場景的話。

每一個配置項都有可能變得複雜起來。

什麼是loader?什麼是plugin?他們執行前後關係是什麼？

loader 用於對模塊的源代碼進行轉換。

loader 可使你在 import 或"加載"模塊時預處理文件。

所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。

插件是 webpack 的支柱功能。

webpack 自身也是構建於，你在 webpack 配置中用到的相同的插件系統之上！

插件目的在於解決 loader 沒法實現的其餘事。

天然而然，這樣經過描述，就能比較清晰的理解的。

plugin是在loader以後執行的，當loader處理完模塊代碼，plugin繼續處理loader未能作完的事情

提升webpack的構建速度

這裏有的一篇文章介紹的比較詳細

https://www.jianshu.com/p/bb1e76edc71e

固然優化的點大體能夠區分下

- 選用合適的loader，這個是比較重要的，可以有效的提高webpack編譯的速度。

- 使用Happypack 實現多線程加速編譯。

- 不須要打包編譯的插件庫換成全局"script"標籤引入的方式

- 開啓緩存

什麼是compiler

這個只有當本身真正去寫插件的時候，纔會意識到的。

compiler

Compiler 模塊是 webpack 的支柱引擎，它經過 CLI 或 Node API 傳遞的全部選項，

建立出一個 compilation 實例。它擴展(extend)自 Tapable 類，以便註冊和調用插件。

大多數面向用戶的插件，會先在 Compiler 上註冊。

如下生命週期鉤子函數，

生命週期	說明
entryOption	在 entry 配置項處理過以後，執行插件
afterPlugins	設置完初始插件以後，執行插件
afterResolvers	resolver 安裝完成以後，執行插件。
environment	environment 準備好以後，執行插件。
afterEnvironment	environment 安裝完成以後，執行插件。
beforeRun	compiler.run() 執行以前，添加一個鉤子。
run	開始讀取 records 以前，鉤入(hook into) compiler。
watchRun	監聽模式下，一個新的編譯(compilation)觸發以後，執行一個插件，可是是在實際編譯開始以前。
normalModuleFactory	NormalModuleFactory 建立以後，執行插件。
contextModuleFactory	ContextModuleFactory 建立以後，執行插件。
beforeCompile	編譯(compilation)參數建立以後，執行插件。
compile	一個新的編譯(compilation)建立以後，鉤入(hook into) compiler。
thisCompilation	觸發 compilation 事件以前執行（查看下面的 compilation）。
compilation	編譯(compilation)建立以後，執行插件。
make	……
afterCompile	……
shouldEmit	……。
needAdditionalPass	……
afterEmit	生成資源到 output 目錄以後。
done	編譯(compilation)完成。
failed	編譯(compilation)失敗。
invalid	監聽模式下，編譯無效時。
watchClose	監聽模式中止。

實際應用的時候，大概只須要上面幾個編譯前，編譯後的幾個鉤子

最後

請原諒偶只是個標題黨，文章也只是大體介紹的webpack全部須要瞭解的知識點的大概範圍。

在實際場景應用的時候，各不相同。