本文旨在记录 webpack v3.x 与 v2.x 之间的区别。

两个版本几乎完全兼容,新增部分新特性

1. 加入「Scope Hoisting」作用域提升

过去 webpack 打包时的一个取舍是将 bundle 中各个模块单独打包成闭包。这些打包函数使你的 JavaScript 在浏览器中处理的更慢。相比之下,一些工具像 Closure Compiler 和 RollupJS 可以提升(hoist)或者预编译所有模块到一个闭包中,提升你的代码在浏览器中的执行速度。

这个插件会在 webpack 中实现以上的预编译功能。

使用:

1
2
3
4
5
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};

这种连结行为被称为“作用域提升(scope hoisting)”。

由于实现 ECMAScript 模块语法,作用域提升(scope hoisting)这个特定于此语法的功能才成为可能。webpack 可能会根据你正在使用的模块类型和其他的情况,回退到普通打包。

注意:此插件仅适用于由 webpack 直接处理的 ES6 模块。在使用转译器(transpiler)时,你需要禁用对模块的处理(例如 Babel 中的 modules 选项)。

2. 加入「Magic Comments」魔法注解

在 Webpack2 中引入了 Code Splitting-Async 的新方法 import(),用于动态引入 ES Module,Webpack 将传入 import 方法的模块打包到一个单独的代码块(chunk),但是却不能像 require.ensure 一样,为生成的 chunk 指定 chunkName。因此在 Webpack 3.x 中提出了 Magic Comment 用于解决该问题。

1
import(/* webpackChunkName: "my-chunk-name" */ 'module');