一、概述
2015，webpack1支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。
2016.12，webpack2相对于webpack1最大的改进就是支持ES Module，可以直接分析ES Module之间的依赖关系，而webpack1必须将ES Module转换成CommonJS模块之后，才能使用webpack1进行下一步处理。除此之外webpack2支持tree sharking，与ES Module的设计思路高度契合。
2017.6，webpack3相对于webpack2，过渡相对平稳，但是新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment。
二、webpack1.x升级2.x
1、支持es6模块
webpack1.x原生不支持es6模块，但是可以使用babel-loader把es6的import语法编译成commonjs和amd模块。这个方法是有效的，但是会有一个重要的动态加载警告。webpack2支持原生ES6，这意味着webpack2可以使用import和export转换为CommonJS。
import { currentPage, readPage } from "./book";
currentPage === 0;
readPage();
currentPage === 1;
// book.js
export var currentPage = 0;
export function readPage() {
currentPage++;
}
export default "This is a book";
2、tree-shaking
众所周知，commonjs模块是动态加载的，且可以重命名，要想在静态分析阶段判断哪些代码不会被执行到，有一定难度，需要借助数据流分析。tree-shaking借助了ES6的模块机制，通过import/export等关键字来定义输入输出的方法，且其重命名只能通过as这个关键字，模块一旦被import进来，就是只读的，这样，我们只根据名字，就可以从入口文件一路溯源到模块定义处，只把用到的方法打包进来。
DCE是去除死代码，而tree-shaking是保留活代码，是实现DCE的一种方式。经过webpack2打包之后，未使用的export模块会被标记为/* unused harmony export xxx */，再经过uglify，未被export的xxx定义会被删除。
3、加载器的改变
A、module.loaders改成了module.rules
module: {
- loaders: [
+ rules: [
{
test: /\.css$/,
- loaders: [
+ use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
- query: {
+ options: {
modules: true
}
}
]
},
{
test: /\.jsx$/,
loader: "babel-loader", // Do not use "use" here
options: {
// ...
}
}
]
}
B、链式调用loaders
在webpack1.x中的module.loaders使用!连接各个loader，在webpack2.x中的rules.use设置数组来配置不同loader。
module: {
- loaders: {
+ rules: {
test: /\.less$/,
- loader: "style-loader!css-loader!less-loader"
+ use: [
+ "style-loader",
+ "css-loader",
+ "less-loader"
+ ]
}
}
C、json-loader不再需要手动添加
如果没有为JSON文件配置loader，webpack2将自动尝试通过加载json-loader JSON文件。
4、插件的改变
A、UglifyJsPlugin插件
UglifyJsPlugin的sourceMap配置项现在默认为false而不是true，这意味着如果你在压缩代码时启用了source map，或者想要让uglifyjs的警告能够对应到正确的代码行，你需要将UglifyJsPlugin的sourceMap设为true。
UglifyJsPlugin的compress.warnings配置项现在默认为false而不是true。这意味着如果你想要看到uglifyjs 的警告信息，你需要将compress.warnings设为true。
devtool: "source-map",
plugins: [
new UglifyJsPlugin({
+ sourceMap: true,
+ compress: {
+ warnings: true
+ }
})
]
B、BannerPlugin插件
BannerPlugin插件不再接受两个参数而是只接受单独的options对象。
plugins: [
- new webpack.BannerPlugin('Banner', {raw: true, entryOnly: true});
+ new webpack.BannerPlugin({banner: 'Banner', raw: true, entryOnly: true});
]
C、OccurrenceOrderPlugin被默认加载
我们不再需要在配置里指定它。
plugins: [ - new webpack.optimize.OccurrenceOrderPlugin() ]
D、ExtractTextPlugin插件
ExtractTextPlugin.extract
module: {
rules: [
{
test: /.css$/,
- loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
+ use: ExtractTextPlugin.extract({
+ fallback: "style-loader",
+ use: "css-loader",
+ publicPath: "/dist"
+ })
}
]
}
new ExtractTextPlugin({options})
plugins: [
- new ExtractTextPlugin("bundle.css", { allChunks: true, disable: false })
+ new ExtractTextPlugin({
+ filename: "bundle.css",
+ disable: false,
+ allChunks: true
+ })
]
5、webpack-dev-server1.x升级2.x
- --inline默认开启，无需在输入命令时添加；
- 删除contentBase用proxy代替；
- 减少控制台无用输出，在1.x中，当我们停掉服务器后，控制台会一直输出错误信息。但是在2.x中，只会输出[WDS] Disconnected!
三、webpack2.x升级3.x
1、作用域提升
webpack2处理后的每个模块均被一个函数包裹，如下：
/***/ (function(module, __webpack_exports__, __webpack_require__) {
window.lib = {}
...
/* harmony default export */ __webpack_exports__["a"] = (window.lib);
/***/ }),
这样做，会降低浏览器中JS执行效率，因为闭包函数降低了JS引擎解析速度。
于是，webpack团队参考Closure Compiler和Rollup JS，将一些有联系的模块，放到一个闭包函数里面去，通过减少闭包函数数量来加快JS的执行速度。
webpack3通过设置ModuleConcatenationPlugin使用这个新特性：
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
};
Scope Hoisting是基于ES Module的，对于Common.js和AMD的模块不适用，不适用的情况下仍采用webpack2的模式。
2、魔法注释
在webpack2中引入了Code Splitting-Async的新方法import()，用于动态引入ES Module，webpack2将传入import方法的模块打包到一个单独的代码块（chunk），但是却不能像require.ensure一样，为生成的chunk指定chunkName，因此在webpack3中提出了Magic Comment用于解决该问题，用法如下：
import(/* webpackChunkName: "my-chunk-name" */ 'module');