-
npm i terser-webpack-plugin optimize-css-assets-webpack-plugin -D
-
webpack.config.js中 配置优化项 optimization:
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
optimization: {//优化项
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
},
//使用mini-css-extract-plugin插件
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
],
module: {
rules: [
{
test: /\.css$/,
//使用mini-css-extract-plugin的loader代替'style-loader'
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
};