webpack3新特性簡介

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 模塊支持
• 提高用戶體驗