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了吗？你的想法是什么，在评论区留下你的见解吧。