webpack4生猛升级

Posted 2022-11-26 小章鱼哥

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

超级值得的一次升级！

不敢相信自己的眼睛啊。

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

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

• • • 配置区别
      • 1. splitChunks替代CommonsChunkPlugin
      • 2. MiniCssExtractPlugin替代ExtractTextPlugin
      • 新的插件机制
    • demo

配置区别

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分享过来。