webpack使用mini-css-extract-plugin插件分离css样式后 压缩css样式代码 已及js代码

• 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'],
      },
    ],
  },
};

• npm run build打包项目