webpack4新特性介紹

weixin_34370347發表於2018-03-25
Web

導語: webpack是一個JS應用打包器, 它將應用中的各個模組打成一個或者多個bundle檔案。藉助loaders和plugins，它可以改變、壓縮和優化各種各樣的檔案。它的輸入是不同的資源，比如：js、css、圖片、字型和html檔案等等，然後將它們輸出成瀏覽器可以正常解析的檔案。

當下最流行的模組打包器 webpack 於2018年2月25日正式釋出v4.0.0版本，代號legato。從官方的 釋出日誌 來看, 本次大版本更新帶來了很多新特性更新和改善，這將會讓webpack的配置更加簡單。本文，筆者將會全面介紹webpack4的新特性及實踐。

環境支援

在釋出日誌裡的 Big changes 板塊，官方宣佈不在支援Node 4, Node 6 使用的是v8 5.0版本，支援93%的ES6語法。不難看出，這個決定是為了更好的利用ES6語法的優勢，來編寫出更加整潔和健壯的程式碼。

備註：當使用webpack4時，確保使用 Node.js的版本 >= 8.9.4。因為webpack4使用了很多JS新的語法，它們在新版本的 v8 裡經過了優化。

mode 屬性

另一個大的改變是webpack需要設定mode屬性，可以是 development 或 production。

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}
複製程式碼

通過mode, 你可以輕鬆設定打包環境。如果你將 mode 設定成 development，你將獲得最好的開發階段體驗。這得益於webpack針對開發模式提供的特性：

  • 瀏覽器除錯工具
  • 註釋、開發階段的詳細錯誤日誌和提示
  • 快速和優化的增量構建機制

如果你將mode設定成了 production, webpack將會專注專案的部署，包括以下特性：

  • 開啟所有的優化程式碼
  • 更小的bundle大小
  • 去除掉只在開發階段執行的程式碼
  • Scope hoisting和Tree-shaking

外掛和優化

webpack4刪除了CommonsChunkPlugin外掛，它使用內建API optimization.splitChunks 和 optimization.runtimeChunk，這意味著webpack會預設為你生成共享的程式碼塊。其它外掛變化如下:

  • NoEmitOnErrorsPlugin 廢棄，使用optimization.noEmitOnErrors替代，在生產環境中預設開啟該外掛。
  • ModuleConcatenationPlugin 廢棄，使用optimization.concatenateModules替代，在生產環境預設開啟該外掛。
  • NamedModulesPlugin 廢棄，使用optimization.namedModules替代，在生產環境預設開啟。
  • uglifyjs-webpack-plugin升級到了v1.0版本, 預設開啟快取和並行功能。

開箱即用WebAssembly

WebAssembly(wasm)會帶來執行時效能的大幅度提升，由於在社群的熱度，webpack4對它做了開箱即用的支援。你可以直接對本地的wasm模組進行import或者export操作，也可以通過編寫loaders來直接import C++、C或者Rust。

支援多種模組型別

webpack4支援5種模組型別：

  • javascript/auto: 在webpack3裡，預設開啟對所有模組系統的支援，包括CommonJS、AMD、ESM。
  • javascript/esm: 只支援ESM這種靜態模組。
  • javascript/dynamic: 只支援CommonJS和AMD這種動態模組。
  • json: 只支援JSON資料，可以通過require和import來使用。
  • webassembly/experimental: 只支援wasm模組，目前處於試驗階段。

0CJS

0CJS的含義是0配置，webpack4受Parcel打包工具啟發，儘可能的讓開發者執行專案的成本變低。為了做到0配置，webpack4不再強制需要 webpack.config.js 作為打包的入口配置檔案了，它預設的入口為'./src/'和預設出口'./dist'，這無疑對小專案而言是福音。

你所需要做的是在你的專案裡包含 ./src/index.js 檔案。當在命令列裡執行 webpack 命令時，webpack會將該檔案作為專案的入口檔案進行打包配置。

新的外掛系統

webpack4對外掛系統進行了不少修改，提供了針對外掛和鉤子的新API。變化如下：

  • 所有的hook由 hooks 物件統一管理，它將所有的hook作為可擴充套件的類屬性。
  • 當新增外掛時，必須提供一個外掛名稱。
  • 開發外掛時，可以選擇sync/callback/promise作為外掛型別。
  • 可以通過this.hooks = { myHook: new SyncHook(...) } 來註冊hook了。

更多關於新外掛的工作原理可以參考: 新的外掛系統是如何工作的？

Webpack5展望

已經有不少關於webpack5的計劃正在進行中了，包括以下：

  • 對WebAssembly的支援更加穩定
  • 支援開發者自定義模組型別
  • 去除ExtractTextWebpackPlugig外掛，支援開箱即用的CSS模組型別
  • 支援Html模組型別
  • 持久化快取

最後

騰訊IVWEB團隊的工程化解決方案feflow已經開源：Github主頁：https://github.com/feflow/feflow

如果對您的團隊或者專案有幫助，請給個Star支援一下哈～

相關文章