仓库源文，站点原文

layout: post title: webpack 2.x 迁移

tags: [tools]

截止至目前，在 webpack 官网 上已经有说明：webpack v1 已经废弃了，在 npm 上 latest 的 tag 已经指向了 2.2.1。

需要做的改动如下：

• module.loaders 改名为 module.rules，loaders 参数变成了 use，query 参数变成了 options
• loader 名称中的 -loader 需要手动添加
• 不再需要 json-loader
• webpack.optimize.UglifyJsPlugin 默认不生成 sourcemap，需要手动开启
• 不再需要 webpack.optimize.DedupePlugin
• webpack.optimize.OccurrenceOrderPlugin 默认开启，所以不再需要
• ExtractTextWebpackPlugin 需要使用 2.x 版本，并且修改了 api
• 支持动态 import 了，可以写 import(\./routes/${path}/route`)`
• 支持解析 import 和 exports 关键字了，不再需要 babel 对上面两个关键字进行编译。在 .babelrc 中关闭

{
    "presets": [
        [
            "es2015",
            {
                "modules": false
            }
        ],
        "react",
        "stage-0"
    ]
}

• webpack-dev-server 不再接受 contentBase 参数，换成了 proxy
• postcss-loader 的参数需要写到 loader 的 options 中
• webpack.NoErrorsPlugin 被替换成了 webpack.NoEmitOnErrorsPlugin
• 升级 html-webpack-plugin 到最新版，v2.27.0 修复了 wepback@2.x 中 chunksorter 的问题

其他兼容的变更，不需要改动：

• require 中支持 es6 template string
• webpack.config.js 支持异步配置
• webpack.config.js 不再接受不能识别的配置参数
• webpack-dev-server 的控制台输出更少信息

参考资料

• Migrating from v1 to v2
• What’s new in webpack dev server 2.0
• postcss-loader
• Hot reload not working with webpack2 and react-hot-loader3

后记

webpack@2 已经兼容了 webpack@1 的大部分配置，你可能已经不再需要做本文中提到的那些修改了。