webpack4新特性介紹

導語: 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支持一下哈～