摘要：從再到目前當紅明星，前端模塊打包技術日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關于的特征，可以查看知乎如何評價新引入的代碼優化技術的討論。

從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的文章，不免有誤，請及時斧正）