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的默认配置为falseUglifyJsPlugin不再压缩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...