摘要：有哪些新特性有哪些改進(jìn)學(xué)著使用這個(gè)新版本，來(lái)構(gòu)建更快的應(yīng)用吧。繼版本之后，花了將近八個(gè)月的時(shí)間來(lái)發(fā)布。的創(chuàng)始人之一，，建議用戶(hù)使用，以便使用最優(yōu)的性能，是因?yàn)樵创a使用了新特性。全新的插件系統(tǒng)配備了全新整改的插件系統(tǒng)。

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

官方已經(jīng)發(fā)布了Webpack 4.0。有哪些新特性？有哪些改進(jìn)？學(xué)著使用這個(gè)新版本，來(lái)構(gòu)建更快的應(yīng)用吧。

2018年2月25日星期天，Webpack 4.0向公眾發(fā)布。代號(hào)為L(zhǎng)egato，是Javascript模塊打包器的一個(gè)主要版本。繼3.0版本之后，4.0花了將近八個(gè)月的時(shí)間來(lái)發(fā)布。在這篇文章中，覆蓋了Webpack 4.0的主要新特性以及改進(jìn)和棄用。

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

好了，接下來(lái)簡(jiǎn)單的介紹下webpack。

不再支持Nodes.js 4。因?yàn)樵创a已經(jīng)更新到一個(gè)更高的ECMAScript版本。

Webpack的創(chuàng)始人之一，Tobias，建議用戶(hù)使用Node >= 8.94，以便使用最優(yōu)的性能，是因?yàn)樵创a使用了JavaScript新特性。

再見(jiàn)了，CommonChunkPlugin。臭名昭著(infamous)的CommonChunkPlugin被移除了，替代的是兩個(gè)新API：optimize.splitChunks和optimization.runtimeChunk。接下來(lái)我會(huì)解釋一下。

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

默認(rèn)情況下，Webpack 4會(huì)默認(rèn)為你創(chuàng)建共享塊。它通過(guò)optimize.splitChunks進(jìn)行配置。optimization.runtimeChunk: true選項(xiàng)只在運(yùn)行時(shí)在每個(gè)入口添加額外的chunks。

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

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

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

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

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

javascript/esm: 只支持ECMAScript模塊

javascript/dynamic: 只支持CommonJS 和AMD.

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

webassembly/experimental: 只支持WebAssembly，目前只是試驗(yàn)階段

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

production選項(xiàng)提供了一系列默認(rèn)配置，它可以：

更小的輸出尺寸

運(yùn)行時(shí)的快速加載代碼

省略只在開(kāi)發(fā)時(shí)的代碼

不暴露源代碼或者路徑

快捷使用輸出assets

development選項(xiàng)提供了一下默認(rèn)配置，它可以：

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

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

更好的運(yùn)行時(shí)錯(cuò)誤提示

這里可以查看mode對(duì)配置的影響

注意：在webpack中沒(méi)有mode選項(xiàng)，會(huì)有錯(cuò)誤提示。

到目前為止，在webpack.config.js中需要定義一個(gè)entry point來(lái)為app打包。然而，在Webpack 4.0，不需要定義這個(gè)erntry point，默認(rèn)為./src/index.js

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

這種特性的重要意義在于處理小型項(xiàng)目的時(shí)候，不需要配置文件，只需要webpack。

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

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

Webpack的構(gòu)建時(shí)間，和之前的主要版本相比，速度提升了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)。這是一個(gè)全新的API，這些插件和hooks的API有以下的配置：

hooks對(duì)象將所有鉤子作為可擴(kuò)展類(lèi)的屬性

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

在添加插件的時(shí)候，你需要提供一個(gè)名字

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

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

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

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

廢棄和其他的更新

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

import()一直返回一個(gè)命名空間對(duì)象

Wepack默認(rèn)刪除不存在的分支

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

webpackInclud和webpackExclude在import()魔法注釋的支持下，提供了支持，當(dāng)使用動(dòng)態(tài)表達(dá)式的時(shí)候，他們?cè)试S過(guò)濾文件。

Wepack 5正在進(jìn)行幾項(xiàng)規(guī)劃。其中一些計(jì)劃包括：

穩(wěn)定的WebAssembly支持

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

移除ExtractTextWebpackPlugin插件，并支持CSS模塊類(lèi)型

支持HTML模塊類(lèi)型

持久化緩存

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

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

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