webpack2

webpack2.2版本前段时间刚发布，查看了一下我的本地的版本还是1.14，升级一下，webpack2相对于1来说有一些变化，整理一下，方便使用。

一、loader的配置

1.取消了 modules.preLoaders, modules.loaders, modules.afterLoaders，统一变成了 modules.rules。

2.多个 loader 从之前的字符串链式拼接变成了 loader.use 数组形式。

旧的 loader 配置被更强大的 rules 系统取代，后者允许配置 loader 以及其他更多项。为了兼容旧版，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: {
          // ...
        }
      }
    ]
  }

与 v1 版本相同，loaders 可以链式调用，上一个 loader 的输出被作为输入传给下一个 loader。使用 rule.use 配置项，use 可以设置为一个 loaders 的列表。在 v1 版本中，loaders 通常被用 ! 连写。这一写法在新版中只在使用旧的 module.loaders 时有效。

 module: {
-   loaders: {
+   rules: {
      test: /\.less$/,
-     loader: "style-loader!css-loader!less-loader"
+     use: [
+       "style-loader",
+       "css-loader",
+       "less-loader"
+     ]
    }
  }

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


 module: {
-   preLoaders: [
+   rules: [
      {
        test: /\.js$/,
+       enforce: "pre",
        loader: "eslint-loader"
      }
    ]
  }

4.resolve.extensions 不需要自己写一个空字符串在那了，webpack 会自动解析无后缀的模块加载。

二、UglifyJsPlugin

UglifyJsPlugin 的 sourceMap 配置项现在默认为 false 而不是 true。

这意味着如果你在压缩代码时启用了 source map，或者想要让 uglifyjs 的警告能够对应到正确的代码行，你需要将 UglifyJsPlugin 的 sourceMap 设为 true。

 devtool: "source-map",
  plugins: [
    new UglifyJsPlugin({
+     sourceMap: true
    })
  ]

UglifyJsPlugin warnings

UglifyJsPlugin 的 compress.warnings 配置项现在默认为 false 而不是 true。

这意味着如果你想要看到 uglifyjs 的警告信息，你需要将 compress.warnings 设为 true。

 devtool: "source-map",
  plugins: [
    new UglifyJsPlugin({
+     compress: {
+       warnings: true
+     }
    })
  ]

UglifyJsPlugin 压缩 loaders

UglifyJsPlugin 不再压缩 loaders。在未来很长一段时间里，需要通过设置 minimize:true 来压缩 loaders。参考 loader 文档里的相关配置项。

loaders 的压缩模式将在 webpack 3 或更高的版本中被取消。

为了兼容旧的 loaders，loaders 可以通过插件来切换到压缩模式：

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

ExtractTextWebpackPlugin 大变化

ExtractTextPlugin 1.0.0 不能在 webpack v2 下工作。 你需要明确地安装 ExtractTextPlugin v2。

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

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

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
+  })
]

通过 options 配置 loader