webpack正式發布v3.0.0

前言

前兩天發起了一個關於webpack 使用情況的投票，總共有 126 參與，各版本比例分別是：

版本一：20%，版本二：65%，版本三：15%

參與投票數量不多，各位就當看看。

那版本三有哪些點呢，今日早讀由 前端早讀課專欄作者 @ 野草翻譯分享。

正文從這開始～

發布webpack 2之後，我們就跟社區承諾：我們將發布大家投票出來的功能特性，而且會保證更快更穩定的發布周期。

不會再有一年才出來的測試版本，不會再有不兼容的重大改變。我們承諾我們會保證大家的權益，因為你們才使得wepack如此欣欣向榮。

現在webpack團隊很自豪地跟大家宣布，今天（2017.06.20）正式發布了webpack 3.0.0！現在就可以下載升級了！！！

npm install webpack@3.0.--save-dev

或者

yarn add webpack@3.0.--dev

從webpack 2遷移到webpack 3隻需要上述簡簡單單的一條命令行就完成升級。由於webpack內部的一些會影響到插件的大更改，我們把這個版本定為全新的版本號。

新特性

如上所述，我們更新的是你們投票出來的特性。正因為Github上龐大的代碼貢獻，贊助者以及擁護者的支持，我們才得以一一擊破這些新特性。

作用域提升（Scope Hoisting）

作用域提升是wepack 3的核心特性。webpack在打包時會把每個模塊用單獨的閉包封裝起來，這些閉包會減速代碼的執行過程，但這是webpack在性能作出的一個權衡。相比之下，諸如Closure Compiler和RollupJS之類的打包工具「提升」或者說打通了所有模塊的作用域，將文件打包到一個閉包函數中，提高了代碼的執行速度。

現在有了webpack 3，可以在配置上中添加如下插件來實現作用域提升的功能：

module.exports={

plugins:[

newwebpack.optimize.ModuleConcatenationPlugin()

]

};

作用域提升是ECMAScript標準中模塊的新語法。webpack打包也可能會回退到常規的打包策略，這取決於你採用的是哪種模塊語法（ES模塊語法還是其他模塊語法），當然還有其他條件。

想知道回退的原因，可以添加--display-optimization-bailout屬性，它會在回退的時候通知你並顯示原因。

由於作用域提升移除了模塊的閉包函數，打包後的代碼可能會變小。不過，最關鍵的提升點是代碼執行速度。如果你有很好的對比例子，可以告訴我們，我們很樂意與大家分享。

魔法注釋（Magic Comments）

當我們告訴大家webpack 2可以使用動態引入語法（import()）的時候，開發者反饋說它不能像require.ensure一樣命名打包之後文件的名字。

現在我們引入了社區所謂的魔法注釋特性，它能讓開發者在import()語句中以內聯注釋的方式傳入打包後文件的名字，以及其他更多配置。

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

這些特性在webpack 2.4 和 2.6 版本中已經發布，但是v3版本修復了已有的bug，保證了特性的穩定性。現在，我們可以像使用require.ensure一樣靈活地使用動態引入語法了。

下一步

以下是我們正在做的：

更好的構建緩存

更快的初次和漸進構建體驗

更好的TypeScript體驗

長期緩存改進

WASM模塊支持

用戶體驗提升

附錄

Git倉庫上列出列 webpack 2.6.1到wepback 3.0.0的新特性：

node_modules no longer mangle to ~ in stats(重大改變)

HMR請求可配置超時時間

新增試驗性特性作用域提升

性能提升

新增output.libraryExport配置導出的庫

sourceMapFilename支持[contenthash](重大改變)

module.noParse支持函數

新增node: false配置項使所有node 配置失效

關於本文

譯者：@野草

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！