optimize-css-assets-webpack-plugin css代码压缩

接下来就是设置 optimization.minimizer ，这里需要注意的就是，此时设置optimization.minimizer会覆盖webpack默认提供的规则，比如JS代码就不会再去压缩了

  1. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  2. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  3. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  4. const {
  5.     merge
  6. } = require('webpack-merge')
  7. const commomConfig = require('./webpack.common')
  9. const prodConfig = {
  10.     mode: 'production',
  11.     devtool: 'cheap-module-source-map',
  12.     optimization: {
  13.         minimizer: [
  14.             new UglifyJsPlugin({
  15.                 sourceMap: true,
  16.                 parallel: true, // 启用多线程并行运行提高编译速度
  17.             }),
  18.             new OptimizeCSSAssetsPlugin({}),
  19.         ]
  20.     },
  21.     plugins: [
  22.         new MiniCssExtractPlugin({
  23.             // 类似 webpackOptions.output里面的配置 可以忽略
  24.             filename: '[name].[hash].css',
  25.             chunkFilename: '[id].[hash].css'
  26.         })
  27.     ],
  28.     module: {
  29.         rules: [{
  30.             test: /\.(sa|sc|c)ss$/,
  31.             use: [{
  32.                     loader: MiniCssExtractPlugin.loader,
  33.                     options: {
  34.                         // 这里可以指定一个 publicPath
  35.                         // 默认使用 webpackOptions.output中的publicPathcss
  36.                         // 举个例子,后台支持把css代码块放入cdn
  37.                         publicPath: "https://cdn.example.com/css/"
  38.                     },
  39.                 },
  40.                 'css-loader',
  41.                 'postcss-loader',
  42.                 'sass-loader',
  43.             ],
  44.         }]
  45.     },
  47. }
  49. module.exports = merge(commomConfig, prodConfig)

uglifyjs-webpack-plugin代码压缩

这个插件解决的问题，就是当你需要去optimization.minimizer中设置，这样子会覆盖webpack基本配置，原本JS代码压缩的功能就会被覆盖

  1. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  2. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  3. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  4. const {
  5.     merge
  6. } = require('webpack-merge')
  7. const commonConfig = require('./webpack.common')
  9. const prodConfig = {
  10.     mode: 'production',
  11.     devtool: 'cheap-module-source-map',
  12.     optimization: {
  13.         minimizer: [
  14.             new UglifyJsPlugin({
  15.                 sourceMap: true,
  16.                 parallel: true,  // 启用多线程并行运行提高编译速度
  17.             }),
  18.             new OptimizeCSSAssetsPlugin({}),
  19.         ]
  20.     },
  21.     plugins: [
  22.         new MiniCssExtractPlugin({
  23.             // 类似 webpackOptions.output里面的配置 可以忽略
  24.             filename: '[name].[hash].css',
  25.             chunkFilename: '[id].[hash].css'
  26.         })
  27.     ],
  28.     module: {
  29.         rules: [{
  30.             test: /\.(sa|sc|c)ss$/,
  31.             use: [{
  32.                     loader: MiniCssExtractPlugin.loader,
  33.                     options: {
  34.                         // 这里可以指定一个 publicPath
  35.                         // 默认使用 webpackOptions.output中的publicPathcss
  36.                         // 举个例子,后台支持把css代码块放入cdn
  37.                         publicPath: "https://cdn.example.com/css/"
  38.                     },
  39.                 },
  40.                 'css-loader',
  41.                 'postcss-loader',
  42.                 'sass-loader',
  43.             ],
  44.         }]
  45.     },
  47. }
  49. module.exports = merge(commonConfig, prodConfig)