webpack的版本进化史

一、概述
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');