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 [email protected] --save-dev           

或者

yarn add [email protected] --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 的版本主要是團隊提供更好産品的一個決心象征吧。

作者：

Parry

出處：

http://www.cnblogs.com/parry/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。