Webpack 4.0 發佈:有哪些新特性？（譯）

本文原文地址： https://auth0.com/blog/webpac...
第一次翻譯，不當之處，歡迎指正

官方已經發布了Webpack 4.0。有哪些新特性？有哪些改進？學着使用這個新版本，來構建更快的應用吧。

2018年2月25日星期天，Webpack 4.0向公衆發佈。代號爲Legato，是Javascript模塊打包器的一個主要版本。繼3.0版本以後，4.0花了將近八個月的時間來發布。在這篇文章中，覆蓋了Webpack 4.0的主要新特性以及改進和棄用。

Webpack是一個實用的JavaScript程序打包工具。它能把每一個模塊打包在至少一個文件中(一般只有一個文件)，而且提供給瀏覽器運行。不管如何，Webpack不只僅是一個打包的工具。在各類loaders和plugins的幫助下，他能改變、縮小和優化文件，而後在瀏覽器上運行。它須要不一樣的資源，好比JavaScript、CSS、字體、圖片和HTML，而後將這些資源放進配置中，以便瀏覽器使用。Webpack的高明之處，在於它的總體。

好了，接下來簡單的介紹下webpack。

What’s new in Webpack 4.0?

1.再也不支持Node.js 4

再也不支持Nodes.js 4。由於源碼已經更新到一個更高的ECMAScript版本。

Webpack的創始人之一，Tobias，建議用戶使用Node >= 8.94，以便使用最優的性能，是由於源代碼使用了JavaScript新特性。

2.告別CommonChunkPlugin，迎接SplitChunksPlugin

再見了，CommonChunkPlugin。臭名昭著(infamous)的CommonChunkPlugin被移除了，替代的是兩個新API：optimize.splitChunks和optimization.runtimeChunk。接下來我會解釋一下。

Webpack 4對塊圖進行了巨大改進，並使用了新的塊拆分技術。在新的改進過程當中，誕生了新的插件---SplitChunksPlugin。這個插件可以自動識別哪些模塊須要拆分爲啓發式的(heuristics)，哪些須要拆分爲塊。另外，它還有一些極好的特性，好比在異步chunks的高效，以及把vender拆分紅不一樣的vender塊。

默認狀況下，Webpack 4會默認爲你建立共享塊。它經過optimize.splitChunks進行配置。optimization.runtimeChunk: true選項只在運行時在每一個入口添加額外的chunks。

Tobias有一篇文章，關於優化原理的案例

3.支持WebAssembly

WebAssembly(wasm) 是一個新的移動的、高效加載的可供web使用的工具。它確實很快，開發者社區也很快擁抱了這個技術。所以，Webpack 4 已經提供了wasm的支持。在Webpack 4,你能夠引入和導出任何一個Webassembly的模塊。同時，你也能夠寫一個loaders來直接引入C++、C和Rust。

Note: WebAssembly 模塊只能在異步chunks中使用。

4.支持多種模塊類型

Webpack 4.0如今支持如下五種模塊類型：

• javascript/auto: Webpack 3.0在多種模塊系統中支持了這種模塊類型，好比CommonJS, AMD, ESM.
• javascript/esm: 只支持ECMAScript模塊
• javascript/dynamic: 只支持CommonJS 和AMD.
• json: 支持JSON數據，能夠經過require和import使用
• webassembly/experimental: 只支持WebAssembly，目前只是試驗階段

5.用mode點燃火焰

在此刻，對於這個新特性，我比任何都激動。webpack團隊引入了一個叫作mode的配置屬性來實現零配置(#oCJS)的模塊打包。mode能夠設置爲以下值：development和production。開箱即用，默認爲production。

production選項提供了一系列默認配置，它能夠：

• 更小的輸出尺寸
• 運行時的快速加載代碼
• 省略只在開發時的代碼
• 不暴露源代碼或者路徑
• 快捷使用輸出assets

development選項提供了一下默認配置，它能夠：

• 瀏覽器內調試更好的工具
• 在一個快速的開發週期，更快的增量編譯
• 更好的運行時錯誤提示

這裏能夠查看mode對配置的影響

注意：在webpack中沒有mode選項，會有錯誤提示。

6.零配置模塊打包 #OCJS

到目前爲止，在webpack.config.js中須要定義一個entry point來爲app打包。然而，在Webpack 4.0，不須要定義這個erntry point，默認爲./src/index.js

並且，也不要定義輸出文件，缺省爲./dist/main.js

這種特性的重要意義在於處理小型項目的時候，不須要配置文件，只須要webpack。

Webpack 4不須要配置文件和入口文件。

Webpack 4 不須要任何配置文件，只要src/index.js文件。

7.更快的構建時間

Webpack的構建時間，和以前的主要版本相比，速度提高了98%。若是不信，能夠本身嘗試一下。你能夠這樣用：
npm i webpack --save-dev

或者使用yarn:
yarn add webpack --dev

在package.json中，你能夠看到devDependencies這一塊：

"webpack": "^4.0.0"

Webpack 3: 2405ms

webpack 4 :1388ms

Webpack 4.x 是3.x版本的2倍多。

8.全新的插件系統

Webpack 4配備了全新整改的插件系統。這是一個全新的API，這些插件和hooks的API有如下的配置：

• hooks對象將全部鉤子做爲可擴展類的屬性
• 多種Hook類如今會根據hook類型存在：sync, async, normal, bailing, waterfall, looping.
• 在添加插件的時候，你須要提供一個名字
• 在添加插件的時候，你能夠選擇插件的類型(sync/callback/promise)
• this.hooks = { myHook: new SyncHook(…) } 是註冊鉤子的新方法。建立一個新的Hook對象，做爲hooks對象的屬性

Tobias文章：對新插件如何工做的理解。插件的方法是向後兼容的。

9.到webpack-cli的改變

webpack的cli(command line interface)已經移動到webpack-cli了，若是要使用CLI,你須要安裝webpack-cli。
Webpack CLI文檔可讓你高效的開始。

廢棄和其餘的更新

• 這些插件已經廢棄了，NoEmitOnErrorsPlugin, ModuleConcatenationPlugin, NamedModulesPlugin。如今你能夠分別使用optimization.noEmitOnErrors,optimization.concatenateModules和optimization.namedModules了。
• import()一直返回一個命名空間對象
• Wepack默認刪除不存在的分支
• 如今使用System.import()會彈出警告的提示
• webpackInclud和webpackExclude在import()魔法註釋的支持下，提供了支持，當使用動態表達式的時候，他們容許過濾文件。

通往Webpack 5

Wepack 5正在進行幾項規劃。其中一些計劃包括：

• 穩定的WebAssembly支持
• 建立一個自定義的模塊類型，而且使Webpack提供支持的能力
• 移除ExtractTextWebpackPlugin插件，並支持CSS模塊類型
• 支持HTML模塊類型
• 持久化緩存

除此以外：在Auth0 的Webpack和Javascript
(此部分講解Auth0中使用Webpack 4, 省略)

結論：

如今你已經瞭解到Weboack的新功能了。Webpack擁有不少的新特性和改進，Wepack 的團隊對Webpack 4.0的遷移和合並有詳細指導，在接下來的幾周和一月內將會推出。對Webpack很陌生？我寫了一篇模塊打包器的簡單介紹。Sean Larkin在Webpack Academy也有一些很是棒的Webpack課程。

你在開始使用Wepack 4.0了嗎？你的想法是什麼，在評論區留下你的見解吧。