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

從Grunt->gulp->webpack,再到目前當(dāng)紅明星rollup，前端模塊打包技術(shù)日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件大小，webpack v2中也加入了tree-shacking,關(guān)于tree-shacking的特征，可以查看知乎如何評(píng)價(jià) Webpack 2 新引入的 Tree-shaking 代碼優(yōu)化技術(shù)？的討論。

webpack在推出 v2之后迅速推出了v3版本，前段時(shí)間在知乎看到webpack作者LarkInn(他已經(jīng)入駐sf)說(shuō)后續(xù)會(huì)維持一個(gè)更快、一致和更穩(wěn)定的發(fā)布周期點(diǎn)這，難道要步Angular的后塵，作為吃瓜群眾表示很震驚，因?yàn)槟壳白约哼@邊項(xiàng)目webpack還停留在1.x版本，鑒于減少日后升級(jí)難度的想法，包括后續(xù)要做代碼和流程優(yōu)化，我將webpack升級(jí)到了v2版本，在這主要想把這個(gè)升級(jí)過(guò)程遇到的一些問(wèn)題分享出來(lái)，也方便大家踩坑。

1. 更新版本號(hào)

我能想到最簡(jiǎn)單粗暴的做法就是直接把版本號(hào)改了下載新包看下會(huì)發(fā)生什么。使用npm info webpack查看了一下版本的發(fā)布信息，我更新到2.6.1版本，也是3.0前的最后一個(gè)版本，
期待一大堆報(bào)錯(cuò)，很尷尬，發(fā)現(xiàn)webpack仍然使用1.x版本工作，也就是說(shuō)包并沒(méi)有更新到，查了一下發(fā)現(xiàn)可能緩存造成的，使用npm cache clean但貌似也不管用，索性直接把node_module刪除了，重新安裝了一下模塊，打包，果然報(bào)錯(cuò)了：

2.resolve變更

報(bào)錯(cuò)信息：

throw new WebpackOptionsValidationError  
configuration.resolve.extensions[0] should not be empty
...    

提示是resolve.extensions寫法有問(wèn)題，查看了一下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"]
    },

報(bào)錯(cuò)信息：

configuration.resolve has an unknown property "root". These properties are valid:
...

原來(lái)root寫法也變了,root放在modules里了。

    resolve: {
        modules: [
            path.resolve(__dirname, "src"), "node_modules"
        ]
    }
}

3.loaders => rules

 configuration.module.rules[0].use should be one of these: ...

接下來(lái)應(yīng)該就是一堆loader寫法有問(wèn)題，loader已經(jīng)全部改成了rules的寫法，并且為了更加嚴(yán)謹(jǐn)？之前省略的loader后綴也得加上。由于webpack2會(huì)自動(dòng)給加載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默認(rèn)是不開(kāi)啟的，建議開(kāi)啟壓縮可以縮小文件大小。babel-loader的cacheDirectory開(kāi)啟緩存可以加速編譯過(guò)程。

4.extract-text-webpack-plugin

修改原來(lái)的ExtractTextPlugin插件配置，對(duì)css文件進(jìn)行處理，發(fā)現(xiàn)報(bào)如下錯(cuò)誤：

報(bào)錯(cuò)：

 throw new Error("Chunk.entry was removed. Use hasRuntime()");

google了一下發(fā)現(xiàn)是當(dāng)前版本(1.0.1)已經(jīng)不適用， 升級(jí)到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插件配置會(huì)麻煩一些，有兩種方法：
一種是新建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模塊引起的，沒(méi)有太明白問(wèn)題出在哪，issues地址,我在webpack.config.js在加上下面代碼解決了。

process.noDeprecation = true

升級(jí)總結(jié)

v1.x的時(shí)候大家都在吐槽webpack文檔問(wèn)題，v2文檔確實(shí)提升不少，包括這次的升級(jí)如果跟著指南走，基本不會(huì)出什么大問(wèn)題，只是中途在配置ExtractTextPlugin、postcss插件時(shí)折騰了一些時(shí)間。完成這次的升級(jí)后，后續(xù)準(zhǔn)備對(duì)流程再進(jìn)一步的優(yōu)化，縮減打包時(shí)間、減少bundle大小等。
這里推薦一款插件webpack-visualizer-plugin，可以將項(xiàng)目的打包情況可視化，清楚了解到每個(gè)模塊的大小、占比，方便后續(xù)的優(yōu)化。

如果對(duì)v2版配置還有問(wèn)題的同學(xué)，可以查看我之前的一個(gè)v3.1版本的webpack.config.js。

附：
1.webpack v1至v2升級(jí)指南
官方webapck 1->2升級(jí)guides
另一位同學(xué)翻譯的升級(jí)指南中文版
2.幾篇關(guān)于升級(jí)優(yōu)化的好文章：
Boost webpack build performance | Optimising webpack build performance | Webpack 構(gòu)建性能優(yōu)化探索
webpack2 終極優(yōu)化
3.關(guān)于webpack的好文章集合(awesome-webpack)
搜羅一切webpack的好文章好工具

（ps:第一次寫關(guān)于webpack的文章，不免有誤，請(qǐng)及時(shí)斧正）