从 webpack 1 到 webpack 2 的迁移记

最近上手新项目的时候想要用个 sass，结果发现 npm 里面的 sass-loader 默认的 peerDependencies 中的 webpack 版本被升级到了 2
当时没想太多，就装了个 webpack 2.2.1 来用，结果发现以前项目的 webpack 配置居然不能够直接用！一跑起来一还堆错
上网查了下，才知道 webpack 2 弄了很多 breaking changes ，想着反正这些问题迟早要解决的，于是就开始了我的 webpack 2 踩坑过程

1、以前那种省略 ‘-loader’ 的写法不能直接用了

具体信息参考 https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.26
如果还是要用以前的这种省略式的写法，需要在 webpack 的配置文件中添加一条配置项

1	resolveLoader: {moduleExtensions : ['-loader']}

2、相关插件都要对应的进行升级

webpack 2 和旧版本的 extract-text-webpack-plugin 似乎不兼容
如果要 extract-text-webpack-plugin，则 extract-text-webpack-plugin 的版本也要升到 2.0 以上
截至写这篇文章为止，extract-text-webpack-plugin 的最新版本是 2.0.0-rc.3，可以直接复制下面的命令安装

1	npm install extract-text-webpack-plugin@2.0.0-rc.3 --save-dev

注：如果安装了旧版本的 extract-text-webpack-plugin，需要先卸载旧版，再安装新版
webpack-dev-server 也是一样，需要安装 2.0 或更高版本：

1	npm install webpack-dev-server@latest --save-dev

3、extract-text-webpack-plugin 中 extract 方法的参数需要修改

比如之前需要合成 sass 的话，直接这样配置就可以了

1 2	test: /\.scss/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader','sass-loader')

当时的参数形式是这样的：

1	ExtractTextPlugin.extract([notExtractLoader], loader, [options])

接着换成新的参数形式是这样的：

1	ExtractTextPlugin.extract({[fallback], use, [publicPath]})

其中参数形式变成了对象，不再是原来那样直接传字符串，接着 notExtractLoader 改了个名字叫 fallback（之前还叫过 fallbackLoader），loader 改名成了 use
所以上面那个例子转换过来之后的形式是这个样子的：

test: /\.scss/,
loader: ExtractTextPlugin.extract({
      fallback: "style-loader",
      use: ["css-loader", "sass-loader"]
})

还好我这边的配置不是很多，所以改动量就只有这么大
不过理解起来还是稍微废了点劲，写出来之后就明白多了

参考资料：

Webpack 1 ReadMe
Webpack 2 ReadMe
Migrating from v1 to v2
Migrating to Webpack 2