【前言】

webpack5的压缩大致和webpack4相似，稍微有一些不同

【不压缩css】

dev模式下不需要压缩css，且讲css以style的形式注入到html即可

  rules: [
    {
      test: /\.css$/,
      include: [
          /node_modules[\\/]antd/,
          /node_modules[\\/]normalize\.css/,
          /iconfont\.css$/,
      ],
      use: [
          {
              loader: require.resolve('style-loader'),
          },
          {
              loader: require.resolve('css-loader'),
              options: {
                  modules: false,
              },
          },
      ],
    }
  ]

以上代码将常见的css库，比如antd的css，normalize.css，iconfont.css包括进去

【压缩css】

webpack5中，

生产环境下，建议把css文件单独抽出来，否则html文件会比较大，也不能缓存，

将css文件抽出，而不是使用style-loader注入html，需要用到mini-css-extract-plugin这个插件，

详见：MiniCssExtractPlugin | webpack

  rules: [
    {
      test: /\.css$/,
      include: [
          /node_modules[\\/]antd/,
          /node_modules[\\/]normalize\.css/,
          /iconfont\.css$/,
      ],
      use: [
          MiniCssExtractPlugin.loader,
          {
              loader: require.resolve('css-loader'),
              options: {
                  modules: false,
              },
          },
      ],
    }
  ]

抽取出css文件后，默认是不压缩css，需要在optimization中配置一下

这里使用到了另一个插件，详见：CssMinimizerWebpackPlugin | webpack

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  }

【不压缩scss】

同上，在开发环境中不需要压缩scss文件，只要style的性质注入html即可

  rules: [
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
      ],
    }
  ],

【压缩scss】

同上，在生产环境也需要先抽离css文件，然后进行压缩

  rules: [
    {
      test: /\.scss$/,
      use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
      ],
    }
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  }

【压缩js】

webpack5中，在生产环境下会默认开启js压缩，使用TerserWebpackPlugin | webpack

如果希望自己定制规则也可以通过传入options实现，详细可以看上述文档

  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        extractComments: false,
        terserOptions: {
          format: {
            comments: false,
          },
        },
      }),
    ],
  }

例如上述配置，压缩时去掉了注释，开启了多进程处理