Webpack 3 中的新特性

本文簡短地分享下最新發布的 Webpack 3 中的新特性，供大家參考。

1. Webpack 3 的新特性

6 月 20 日，Webpack 發布了最新的 3.0 版本，並在 Medium 發布了公告。

Webpack 目前幾乎作為前端開發的標配，所以我們一起來看一看新版中有哪些主要的特性更新。
整體相對於 2.0 變化不大，不必驚慌。
Webpack 2.0 的相關視頻教程，可以參見我錄制的共計 20 集的視頻教程，Webpack 2 視頻教程。
下面是 v3.0 Release 中的 Features List。

• node_modules no longer mangle to ~ in stats [breaking change]
• timeout for HMR requests is configurable
• added experimental Scope Hoisting (webpack.optimize.ModuleConcatenationPlugin)
• some performance improvements
• added output.libraryExport to select an export for the library
• sourceMapFilename now supports [contenthash] [breaking change]
• module.noParse supports functions
• add node: false option to disable all node specific additions

1.1 更新方法以及版本遷移

通過命令直接安裝即可，后面需要加上版本號。

npm install webpack@3.0.0 --save-dev

或者

yarn add webpack@3.0.0 --dev

至於從 Webpack 2 升級到 Webpack 3，官方的原話是：

no effort beyond running the upgrade commands in your terminal

所以可以斷定，雖然版本號進行了大版本號的變更，不過並不會有太大的變化，可以松一口氣了。

1.2 Scope Hoisting

之前的每一個 module 都被包含在一個獨立的 function closures 中，這樣的處理方式就造成了在代碼在瀏覽器中執行緩慢的問題。
開發團隊參考了 Closure Compiler 和 RollupJS 等框架后，將 function closures 的包裹方式變成了可配置的形式。
就是在之前的 plugins 中配置即可。

module.exports = {  
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

當然可能因為某些模塊的加載導致不能配置成功，官方提供了 CLI 的參數 --display-optimization-bailout 用於 debug 是什么原因導致了配置失敗。

1.3 Magic Comments

其實就是可以命令 chunk name 了。

import(/* webpackChunkName: "my-chunk-name" */ 'module');

更多的使用可以參考這里。

2. 接下來的新特性

• 更好的編譯緩存
• 更快的首次以及增量編譯速度
• 對 TypeScript 更加友好地支持
• 修改 Long term caching
• 增加對 WASM Module 的支持
• 用戶體驗的改進

3. 總結

總體看來變化不大，而且如 Magic Comments 等功能就已經在 2.4 的版本中發布了，個人感覺，發布一個 3.0 的版本主要是團隊提供更好產品的一個決心象征吧。