你真的熟練使用webpack嗎？

starWind發表於2019-07-27
Web

當自己在簡歷中寫著熟練使用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所有需要了解的知識點的大概範圍。

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

相關文章