Webpack 4正式发布，实现零配置启动

2018 年 2 月 26 日 前端之巅 徐川

Webpack 4 正式发布，代号为 Legato，包括多项重要更新，特别是增加了 0 配置特性，可以视为对前阵子大火的 Parcel 的有力回击。

你可以使用以下代码安装：

$> yarn add webpack --dev
//or
$> npm i webpack --save-dev

更新和改进包括：

性能大幅提升，从官方团队收集的案例显示，性能有从 60%-98% 的提升。并且这是在未添加多核支持和持久化缓存的情况下，意味着性能还有提升空间。
新增 mode 配置，可选择设置为 development 或 production，默认值为 production，它们的主要区别是 development 更重视构建时间，production 更重视尺寸。并且，有了 mode 之后，无需配置即可启动，实现了零配置。
使用 optimize.splitChunks 和 optimization.runtimeChunk 替代 CommonsChunkPlugin。现在开发者可以更简单的实现代码分割和提取公共代码等操作。
支持 WebAssembly，现在可以导入入 WebAssembly 支持的其它语言文件。
支持 CommonJS, AMD, ESM 等模块系统，可以直接导入.mjs 扩展名的模块文件，对 wasm 模块也有实验性的支持。

众多主流前端框架的 CLI 工具将积极跟进这一升级，数周内将发布的 Angular 新版本将直接集成 Webpack 4.

需要注意的是，此次升级对于诸多 plugin 和 loader 来说是破坏性升级，之前官方团队给生态里的伙伴留了一些时间让他们适配此次升级，不过有些未能做到，如 HtmlWebpackPlugin 暂时未能同步升级，Webpack 团队为它创建了一个 fork 来使其支持 4.0 版本，使用方法：

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

其它更多更新细节见发布说明：

https://github.com/webpack/webpack/releases/tag/v4.0.0

Webpack 团队还为这些新特性撰写了一系列介绍文章，可前往阅读：

https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a

https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366

https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202

前端之巅

「前端之巅」是 InfoQ 旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复 “ 加群 ”。投稿请发邮件到 editors@cn.infoq.com，注明 “ 前端之巅投稿 ”。

活动推荐：

随着人工智能、物联网等技术的普及，从未来的端来看，端已经不仅仅是手机和 PC，会涉及到各种各样的端的交互和展现形式。QCon 北京 2018，与淘宝高级技术专家寒冬、新浪微博技术专家聂永、百度资深前端工程师彭星等技术大咖探索前端技术实践，以及实践中的思考和经验参考。目前大会 8 折报名中，立减 1360 元。有任何问题可咨询购票经理 Hanna，电话：15110019061，微信：qcon-0410。