webpack4生猛升级

今天把项目升级了webpack4.0。

超级值得的一次升级！

不敢相信自己的眼睛啊。

dev模式下打包一共用了2s了解一下。（webpack3我dll+happypack齐上阵都要10多s啊）

打包速度比之前提升了6，7倍呀。

配置区别

1. splitChunks替代CommonsChunkPlugin

// 旧
new webpack.optimize.CommonsChunkPlugin({
             name: 'vendor',
             minChunks: function (module) {
               // this assumes your vendor imports exist in the node_modules directory
               return module.context && module.context.includes('node_modules');
            }
}),

// 新
optimization: {
        sideEffects: false,
        splitChunks: {
            chunks     :'all',
            minSize    : 30000,
            minChunks  : 1,
            cacheGroups: {
                common: {
                    name    : 'common',
                    test    : /node_modules/,
                    chunks  : 'initial',
                    priority: -10,
                    enforce : true
                },
                styles: {
                    name   : 'styles',
                    test   : /(\.less|\.css)$/,
                    chunks : 'all',
                    enforce: true,
                }
            }
        }
    },

不得不说，旧版CommonsChunkPlugin真的不好用，动不动就爆bug。
大概是webpackJsonp not found….
—- 鲁迅

2. MiniCssExtractPlugin替代ExtractTextPlugin

为什么要用MiniCssExtractPlugin了呢？因为ExtractTextPlugin没有升级webpack4.0版本，就这么简单。

新的插件机制

const compiler = webpack(config);

function InlineManifestWebpackPlugin (name) {
}
// 这是新版调用
compiler.hooks.emit.tapAsync('InlineManifestWebpackPlugin', (compilation, callback) => {
// 这是旧版调用：compiler.plugin('emit', (compilation, callback) => {
    const assets = compilation.assets;
    let file, data;
    Object.keys(assets).forEach(key => {
        if (key.match(/\.html$/)) {
            file = path.resolve(__dirname, key);
            data = assets[key].source()
            fs.writeFileSync(file, data)
        }
    })
    callback && callback()
})

tapAsync是异步钩子，还有tap同步钩子，tapPromise返回promise的异步钩子。
详情请看官网文档。

demo

有时间整理出来，放到git分享过来。