webpack打包优化
在webpack配置文件中加入以下代码
/*chunks设置成all表示不管是同步加载还是异步加载模块,都进行代码的分割
其它选项一般不用配置,代表使用默认配置*/
optimization: {
splitChunks: {
chunks: 'all'
}
}
css代码分割需要安装mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, /*之前是style-loader*/
{
loader: 'css-loader',
options: {
importLoader: 1
}
},
'postcss-loader'
]
}
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
不过MiniCssExtractPlugin不支持热更新,可以设置环境变量,让开发环境不使用这个plugin