6月20號webpack推出了3.0版本，官方也發布了公告。根據公告介紹，webpack團隊將未來版本的改動聚焦在社區提出的功能需求，同時將保持一個快速、穩定的發布節奏。本文主要依據公告內容，簡單介紹一下webpack3的新特性，以及在實際項目中的應用。
升級到webpack3
升級到webpack3，只需要通過npm安裝即可：
npm install webpack@3.0.0 --save-dev
webpack3幾乎與webpack2完美兼容，除了會影響一些插件的使用，官方給出的數據是：98%的用戶升級后，沒有影響webpack功能的正常使用。升級的時候可能會有一些相關的warning，但是一般不影響使用。
npm WARN babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed. npm WARN extract-text-webpack-plugin@2.1.0 requires a peer of webpack@^2.2.0 but none was installed. npm WARN html-webpack-plugin@2.28.0 requires a peer of webpack@1 || ^2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
webpack3新特性
（1）Scope Hoisting-作用域提升
在之前的一篇文章webpack掃盲篇介紹過，webpack2處理后的每個模塊均被一個函數包裹，如下：
/* 50 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
window.lib = {}
...
/* harmony default export */ __webpack_exports__["a"] = (window.lib);
/***/ }),
這樣會帶來一個問題：降低瀏覽器中JS執行效率，這主要是閉包函數降低了JS引擎解析速度。
於是webpack團隊參考Closure Compiler和Rollup JS，將一些有聯系的模塊，放到一個閉包函數里面去，通過減少閉包函數數量從而加快JS的執行速度。
webpack3通過設置ModuleConcatenationPlugin使用這個新特性：
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
產出對比圖如下：
圖a：webpack2下的產出文件部分內容
圖b：webpack3下的產出文件部分內容
Scope Hoisting是基於ES Module的，對於Common.js和AMD的模塊不適用，不適用的情況下仍采用webpack2的模式。
（2）Magic Comments
在webpack2中引入了Code Splitting-Async的新方法import()，用於動態引入ES Module，webpack將傳入import方法的模塊打包到一個單獨的代碼塊（chunk），但是卻不能像require.ensure一樣，為生成的chunk指定chunkName，因此在webpack3中提出了Magic Comment用於解決該問題，用法如下：
import(/* webpackChunkName: "my-chunk-name" */ 'module');
webpack的未來
想了解webpack的未來，建議先過一下webpack的歷史。
webpack1支持CMD和AMD，同時擁有豐富的plugin和loader，webpack逐漸得到廣泛應用。
webpack2相對於webpack最大的改進就是支持ES Module，可以直接分析ES Module之間的依賴關系，而webpack1必須將ES Module轉換成CommonJS模塊之后，才能使用webpack進行下一步處理。除此之外webpack2支持tree sharking，與ES Module的設計思路高度契合。
webpack3相對於webpack2，過渡相對平穩，但是新的特性大都圍繞ES Module提出，如Scope Hoisting和Magic Comment；
總之，webpack的未來肯定是圍繞ES的支持度、構建速度與產出代碼的性能和用戶體驗來建設的，同時webpack的團隊已經承諾會根據社區的投票來決定新特性開發優先權。以下是公告中給出的未來的重點關注點：
- 高性能的構建緩存
- 提升初始化速度和增量構建效率
- 更好的支持Type Script
- 修訂長期緩存
- 支持WASM 模塊支持
- 提升用戶體驗