从Grunt->gulp->webpack,再到现在当红明星rollup，前端模块打包手艺一日千里，webpack在本年1月份和6月份摆布接连更新了v2和v3版本,为了削减冗余模块，缩减bundle文件大小，webpack v2中也加入了tree-shacking,关于tree-shacking的特性，能够检察知乎怎样评价 Webpack 2 新引入的 Tree-shaking 代码优化手艺？的议论。
webpack在推出 v2以后敏捷推出了v3版本，前段时候在知乎看到webpack作者LarkInn(他已入驻sf)说后续会保持一个更快、一致和更稳固的宣布周期点这，岂非要步Angular的后尘，作为吃瓜大众示意很震动，因为现在本身这边项目webpack还停留在1.x版本，鉴于削减往后晋级难度的主意，包含后续要做代码和流程优化，我将webpack晋级到了v2版本，在这重要想把这个晋级历程碰到的一些题目分享出来，也轻易人人踩坑。
1. 更新版本号
我能想到最简朴粗犷的做法就是直接把版本号改了下载新包看下会发作什么。运用npm info webpack检察了一下版本的宣布信息，我更新到2.6.1版本，也是3.0前的末了一个版本，
期待一大堆报错，很为难，发明webpack依然运用1.x版本事情，也就是说包并没有更新到，查了一下发明能够缓存形成的，运用npm cache clean但貌似也不管用，干脆直接把node_module删除了，重新安装了一下模块，打包，果真报错了：
2.resolve变动
报错信息：
throw new WebpackOptionsValidationError
configuration.resolve.extensions[0] should not be empty
... 提醒是resolve.extensions写法有题目，检察了一下extensions文档
This option no longer requires passing an empty string. 不再支撑空字符的写法了。
webpack1.x写法：
resolve: {
root: ....
extensions: ['', '.js', '.jsx', '.json']
},webpack2写法:
resolve: {
root: ....
extensions: ['*', '.js', '.jsx', '.json']
},报错信息：
configuration.resolve has an unknown property 'root'. These properties are valid:
...本来root写法也变了,root放在modules里了。
resolve: {
modules: [
path.resolve(__dirname, 'src'), 'node_modules'
]
}
}3.loaders => rules
configuration.module.rules[0].use should be one of these: ...接下来应当就是一堆loader写法有题目，loader已悉数改成了rules的写法，而且为了越发严谨？之前省略的loader后缀也得加上。因为webpack2会自动给加载json文件，所以json-loader也就不再需要了，检察这里。
webpack1.x写法:
webpackConfig.module.loaders = [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel',
query: ''
}, {
test: /\.json$/,
loader: 'json'
}]webpack2.x写法：
webpackConfig.module.loaders = [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
cacheDirectory: true,
plugins: [..plugins],
presets: [..presets]
}
}]
}]css-loader，style-loader的设置：
webpack1.x写法：
webpackConfig.module.loaders.push({
test: /\.css$/,
exclude: null,
loaders: [
'style',
'css?modules&importLoaders=1&sourceMap&minimize',
'postcss?pack=default'
]
})webpack2.x写法：
webpackConfig.module.rules.push({
test: /\.css$/,
exclude: null,
use: [
'style-loader',
{
loader: 'css-loader',
opitions: {
modules: true,
sourceMap: true,
minimize: true,
importLoaders: 1
}
},
'postcss-loader'
]
})==注重== 这里css-loder的minimize默许是不开启的，发起开启紧缩能够减少文件大小。babel-loader的cacheDirectory开启缓存能够加快编译历程。
4.extract-text-webpack-plugin
修正本来的ExtractTextPlugin插件设置，对css文件举行处置惩罚，发明报以下毛病：
报错：
throw new Error("Chunk.entry was removed. Use hasRuntime()");google了一下发明是当前版本(1.0.1)已不实用， 晋级到2.0。
webpackConfig.module.rules.push({
test: /\.css$/,
use: extractText.extract({
use:[
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
sourceMap: true,
minimize: true,
importLoaders: 1,
modules: true
}
},
{ loader: 'postcss-loader' }
] })
})
const extractText = new ExtractTextPlugin({
filename: 'styles/[name].[contenthash].css',
allChunks: true,
disable: __DEV__
})
webpackConfig.plugins.push(extractStyles)
5.postcss-loader
postcss-loader插件设置会贫苦一些，有两种要领：
一种是新建postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer')({ /* ...options */ })
]
}另一种：
在webpack.config.js运用LoaderOptionsPlugin
webpackConfig.plugins.push(
new webpack.LoaderOptionsPlugin({
options: {
postcssLoader: () => {
require('autoprefixer')(/* ...options */ )
}
}
}）
）6.loaderUtils Warning
DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/lo…
貌似是loader-utils模块引发的，没有太邃晓题目出在哪，issues地点,我在webpack.config.js在加上下面代码处理了。
process.noDeprecation = true晋级总结
v1.x的时刻人人都在吐槽webpack文档题目，v2文档确切提拔不少，包含此次的晋级假如随着指南走，基础不会出什么大题目，只是半途在设置ExtractTextPlugin、postcss插件时折腾了一些时候。完成此次的晋级后，后续预备对流程再进一步的优化，缩减打包时候、削减bundle大小等。
这里引荐一款插件webpack-visualizer-plugin，能够将项目的打包状况可视化，清晰相识到每一个模块的大小、占比，轻易后续的优化。
假如对v2版设置另有题目的同砚，能够检察我之前的一个v3.1版本的webpack.config.js。
附：
1.webpack v1至v2晋级指南
官方webapck 1->2晋级guides
另一位同砚翻译的晋级指南中文版
2.几篇关于晋级优化的好文章：
Boost webpack build performance | Optimising webpack build performance | Webpack 构建机能优化探究
webpack2 最终优化
3.关于webpack的好文章鸠合(awesome-webpack)
网罗统统webpack的好文章好东西
（ps:第一次写关于webpack的文章，难免有误，请实时指正）
