今天把项目升级了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分享过来。