導語: 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。
支持多種模塊類型
- 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支持一下哈～