摘要：有哪些新特性有哪些改進學著使用這個新版本，來構建更快的應用吧。繼版本之后，花了將近八個月的時間來發(fā)布。的創(chuàng)始人之一，，建議用戶使用，以便使用最優(yōu)的性能，是因為源代碼使用了新特性。全新的插件系統(tǒng)配備了全新整改的插件系統(tǒng)。

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

官方已經(jīng)發(fā)布了Webpack 4.0。有哪些新特性？有哪些改進？學著使用這個新版本，來構建更快的應用吧。

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

Webpack是一個實用的JavaScript程序打包工具。它能把每個模塊打包在至少一個文件中(通常只有一個文件)，并且提供給瀏覽器運行。無論如何，Webpack不僅僅是一個打包的工具。在各種loaders和plugins的幫助下，他能改變、縮小和優(yōu)化文件，然后在瀏覽器上運行。它需要不同的資源，比如JavaScript、CSS、字體、圖片和HTML，然后將這些資源放進配置中，以便瀏覽器使用。Webpack的高明之處，在于它的整體。

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

不再支持Nodes.js 4。因為源碼已經(jīng)更新到一個更高的ECMAScript版本。

Webpack的創(chuàng)始人之一，Tobias，建議用戶使用Node >= 8.94，以便使用最優(yōu)的性能，是因為源代碼使用了JavaScript新特性。

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

Webpack 4對塊圖進行了巨大改進，并使用了新的塊拆分技術。在新的改進過程中，誕生了新的插件---SplitChunksPlugin。這個插件能夠自動識別哪些模塊需要拆分為啟發(fā)式的(heuristics)，哪些需要拆分為塊。另外，它還有一些極好的特性，比如在異步chunks的高效，以及把vender拆分成不同的vender塊。

默認情況下，Webpack 4會默認為你創(chuàng)建共享塊。它通過optimize.splitChunks進行配置。optimization.runtimeChunk: true選項只在運行時在每個入口添加額外的chunks。

Tobias有一篇文章，關于優(yōu)化原理的案例

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

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

Webpack 4.0現(xiàn)在支持以下五種模塊類型：

javascript/auto: Webpack 3.0在多種模塊系統(tǒng)中支持了這種模塊類型，比如CommonJS, AMD, ESM.

javascript/esm: 只支持ECMAScript模塊

javascript/dynamic: 只支持CommonJS 和AMD.

json: 支持JSON數(shù)據(jù)，可以通過require和import使用

webassembly/experimental: 只支持WebAssembly，目前只是試驗階段

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

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

更小的輸出尺寸

運行時的快速加載代碼

省略只在開發(fā)時的代碼

不暴露源代碼或者路徑

快捷使用輸出assets

development選項提供了一下默認配置，它可以：

瀏覽器內(nèi)調(diào)試更好的工具

在一個快速的開發(fā)周期，更快的增量編譯

更好的運行時錯誤提示

這里可以查看mode對配置的影響

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

到目前為止，在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文件。

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倍多。

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

hooks對象將所有鉤子作為可擴展類的屬性

多種Hook類現(xiàn)在會根據(jù)hook類型存在：sync, async, normal, bailing, waterfall, looping.

在添加插件的時候，你需要提供一個名字

在添加插件的時候，你可以選擇插件的類型(sync/callback/promise)

this.hooks = { myHook: new SyncHook(…) } 是注冊鉤子的新方法。創(chuàng)建一個新的Hook對象，作為hooks對象的屬性

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

webpack的cli(command line interface)已經(jīng)移動到webpack-cli了，如果要使用CLI,你需要安裝webpack-cli。
Webpack CLI文檔可以讓你高效的開始。

廢棄和其他的更新

這些插件已經(jīng)廢棄了，NoEmitOnErrorsPlugin, ModuleConcatenationPlugin, NamedModulesPlugin?，F(xiàn)在你可以分別使用optimization.noEmitOnErrors,optimization.concatenateModules和optimization.namedModules了。

import()一直返回一個命名空間對象

Wepack默認刪除不存在的分支

現(xiàn)在使用System.import()會彈出警告的提示

webpackInclud和webpackExclude在import()魔法注釋的支持下，提供了支持，當使用動態(tài)表達式的時候，他們允許過濾文件。

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

穩(wěn)定的WebAssembly支持

創(chuàng)建一個自定義的模塊類型，并且使Webpack提供支持的能力

移除ExtractTextWebpackPlugin插件，并支持CSS模塊類型

支持HTML模塊類型

持久化緩存

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

現(xiàn)在你已經(jīng)了解到Weboack的新功能了。Webpack擁有很多的新特性和改進，Wepack 的團隊對Webpack 4.0的遷移和合并有詳細指導，在接下來的幾周和一月內(nèi)將會推出。對Webpack很陌生？我寫了一篇模塊打包器的簡單介紹。Sean Larkin在Webpack Academy也有一些非常棒的Webpack課程。

你在開始使用Wepack 4.0了嗎？你的想法是什么，在評論區(qū)留下你的看法吧。