Webpack4.0宣布:有哪些新特征？（译）

本文原文地点：
https://auth0.com/blog/webpac&＃8230;

第一次翻译，不当的地方，驱逐斧正

官方已宣布了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。

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对块图举行了庞大革新，并运用了新的块拆分手艺。在新的革新过程当中，诞生了新的插件&＃8212;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()魔法解释的支撑下，供应了支撑，当运用动态表达式的时刻，他们许可过滤文件。

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了吗？你的主意是什么，在批评区留下你的意见吧。