https://www.webpackjs.com/ 官網地址 當自己在簡歷中寫著熟練使用webpack的時候，殊不知自己只是在vue腳手架，react腳手架的路上走著比較輕鬆而已。 當面試官問你這幾個問題的時候，你還能從容答上來嗎(高手請忽略) 什麼是webpack，webpack的打包過程是怎麼 ...
當自己在簡歷中寫著熟練使用webpack的時候，殊不知自己只是在vue腳手架，react腳手架的路上走著比較輕鬆而已。
當面試官問你這幾個問題的時候，你還能從容答上來嗎(高手請忽略)
- 什麼是webpack，webpack的打包過程是怎麼樣的？
- webpack基礎配置的屬性有哪些
- 什麼是loader?什麼是plugin?他們執行先後關係是什麼？
- 提高webpack的構建速度(這個比較廣泛)
- 是否自己寫過plugin(一旦你回答寫過，馬上問題就來了)
- 是否用過compiler ，介紹其中幾個方法？
正文
先拋開這幾個問題。談談本人正常學習webpack的過程，由於幾年前先接觸的vue，一套vue-cli跑下來 ，生成demo以後感覺自己不僅
學會了vue，還精通了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 模塊是 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所有需要瞭解的知識點的大概範圍。
在實際場景應用的時候，各不相同。
