1月25日，Webpack 发布了 4.0.0-beta.0 版本，做了较大改动。我们第一时间来体验一下。

安装

1
npm install webpack@next webpack-cli --save-dev

Webpack 团队切出了 next 分支来开发 Webpack 4，原有的 master 分支将继续 3.x 版本的维护。

新特性

大幅度提升了构建性能

  • 默认情况下，使用 production 模式时，会使用UglifyJS自动并行处理压缩工作并缓存。

  • 发布了一个新的插件系统（https://github.com/webpack/tapable） ，可以更有效的处理插件。

  • 不再支持 Node 4，从而可以大量使用ES6，对V8引擎也进行了一些优化。

向 parcel 看齐 —— 0配置

在 Webpack 4 中，不再强制要求指定 entry 和 output 路径。webpack 4 会默认 entry 为 ./src，output 为 ./dist 。

也就是说，我们可以不再需要一个庞杂的 webpack.config.js 了。

提供默认模式选择

现在在 Webpack 中，需要手动选择生产模式（production）和开发模式（development）。

生产模式中，提供了各种各样的优化，如代码压缩、作用域提升、移除未引用代码（tree-shaking）等，同时还引入了一些如 NoEmitOnErrorsPlugin 这样的原本需要手动使用的插件。

开发模式优化了开发速度和开发体验。同样地，在开发模式中，Webpack 4 提供了 path names 、 eval-source-maps 等功能来优化开发体验和构建速度。

sideEffects 设置 —— 构建体积优化

Webpack 4 提供了 sideEffects 的配置，通过该配置，可以极大幅度地减小打包出的文件的体积，例如，从 lodash-es 中单独导入 export ，大小为223KB，而将该选项配置为 false 后，打包体积仅为 3 KB（压缩后）。

JSON 和 Tree Shaking 的支持

使用 ESModule 语法 导入 JSON 时，Webpack 会从 JSON Module 中移除未用到的部分，从而大幅度减小打包体积。

升级到 UglifyJS2

这意味着可以不再通过转换器，直接使用 ES6 语法。

新的模块类型和 .mjs 的支持

  • javascript/auto: (Webpack 3 默认类型) 支持所有的 Javascript 模块系统：CommonJS、AMD、ESM
  • javascript/esm: EcmaScript 模块，不支持其他所有模块系统（ .mjs 文件的默认类型）
  • javascript/dynamic: 仅支持 CommonJS 和 AMD，不支持 EcmaScript 模块
  • json: JSON 数据，可以使用 require 和 import 引入（.json 文件的默认类型）
  • webassembly/experimental: WebAssembly 模块（目前是 .wasm 文件的默认类型）

移除了 CommonsChunkPlugin

Webpack 4 删除了 CommonsChunkPlugin，并默认启用了它的许多功能。此外，对于那些需要细粒度的缓存策略的用户，增加了 optimization.splitChunks 和 optimization.runtimeChunk 它们更灵活。

支持 WebAssembly

Webpack 现在默认支持 import 和 export 任意本地 WebAssembly 模块。这意味着你可以自己实现 loader 来 import Rust，C++，C 等语言。

其他更新

更详细的内容可以参考官方更新日志：https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0