Webpack V2 升级初体验

Webpack 终于发布了 2.2 版本了，官网也更新了最新的文档。

特性

先过一下 V2 版本新增的一些特性。

• Tree Shaking，可以忽略未使用过的 export方法（这个 V1 的时候就已经通过三方插件实现了，如 babel-plugin-import）

• ES6 modules，支持原生的 ES6 的模块加载器（和 babel-preset-es2015 一起使用时注意关闭其 modules 配置）

• 支持 ES6 作代码拆分，并返回 Promise 对象

• 支持异步 js 请求

• 其它

安装

npm install webpack

目前安装默认会使用 2.2+版本了。

配置

这边仅列举项目中常见配置的一些变更，更具体的信息请翻阅官方文档。

1、 resolve.root, resolve.fallback, resolve.modulesDirectories 配置项被 resolve.modules所替代。

resolve: {
-   root: path.join(__dirname, "src")
+   modules: [
+     path.join(__dirname, "src"),
+     "node_modules"
+   ]
  }

2、 resolve.extensions 配置项不再需要传一个空字符串了。

3、 module.loaders 改成了 module.rules，虽然 module.loaders 语法依旧保留，但是不建议使用。

 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: {
          // ...
        }
      }
    ]
  }

4、 loaders 中由原先! 拼接字符串的写法改为 loader.use 数组。
5、 所有 loader 模块必须带上 -loader 后缀，不能省略。
6、 loader 的参数配置只能写在 rule.options 内部不能写在外面。
7、 ExtractTextWebpackPlugin 改变
ExtractTextPlugin 1.0.0 不能在 webpack v2 下工作。 你需要明确地安装 ExtractTextPlugin v2。

npm install --save-dev extract-text-webpack-plugin@beta

这一插件的配置变化主要体现在语法上。

ExtractTextPlugin.extract

module: {
  rules: [
    test: /.css$/,
-    loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
+    loader: ExtractTextPlugin.extract({
+      fallbackLoader: "style-loader",
+      loader: "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
+  })
]

其它检查项

• loader 默认的 resolve 配置是相对于 context 的，可以不用再使用类似 path.resolve() 的方法来指定目录了

• 取消了 module.preLoaders 以及 module.postLoaders

• 更改 UglifyJsPlugin 的 sourceMap 的默认配置为 false

• 更改 UglifyJsPlugin 的 compress.warnings 的默认配置为 false

• UglifyJsPlugin 不再压缩 loaders，需要通过设置 minimize:true。后续版本会逐渐移除

  plugins: [
+   new webpack.LoaderOptionsPlugin({
+     minimize: true
+   })
  ]

代码中变更

• ES2015 的代码分割
  使用 import() 替代 require.ensure 作为方法来懒加载 chunks 到你的应用中，并返回一个 Promise 对象。这意味着，如果模块加载失败的话，也可以做容错处理。

目前由于这个建议还在 Stage 3，如果你想要同时使用 import 和 Babel，你需要安装/添加 dynamic-import 语法插件来绕过解析错误。

• 支持字符串模板和 Promise。

结尾

体验下来，版本升级，整体配置文件的改动成本还算小的。如果碰到第三方 loader 对 V2 版本支持不友好的话就要费点脑筋了。可能由于我试验项目中文件内容不多，对于编译速度和打包后的文件大小差别不太明显。

参考文章

• Migrating from v1 to v2

UPDATE

Webpack3 基本上也可以无痛升级，比较大的改动点如下：

• 作用域提升

• 魔法注释

参考文章： https://medium.com/webpack/we...