CSS Tree-Shaking

配置 purgecss-webpack-plugin 插件可以摇掉未引用的样式。

const TerserPlugin = require("terser-webpack-plugin")
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const PurgeCSSPlugin = require('purgecss-webpack-plugin')
const resolveApp = require('./paths')
const glob = require('glob')
module.exports = {
  mode: 'development',
  devtool: false,
  optimization: {
    usedExports: true, // 标记不被使用的函数
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
      }),
      new CssMinimizerPlugin()
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    }),
    new PurgeCSSPlugin({
      paths: glob.sync(`${resolveApp('./src')}/**/*`, { nodir: true }),  // 配置要tree-shaking的文件路径。
      safelist: function () {  // 配置不会被摇掉的标签或类名
        return {
          standard: ['body', 'html', 'ef']
        }
      }
    })
  ]
}