关于webpack5 使用 PurifyCSSPlugin 插件去除 多余css 报错TypeError: compiler.plugin is not a function 解决以及原因

在学习webpack5 版本时用到了 PurifyCSSPlugin 插件去除多余css，在配置好之后，run build 时报错

TypeError: compiler.plugin is not a function
at Object.apply (\webpack4\node_modules_purifycss-webpack@0.7.0@purifycss-webpack\dist\index.js:48:16)

这里只贴两条最重要的报错 该报错表示 purifycss-webpack 版本太低 支持不了webpack5 在webpack4中是能正常使用的，

由于开始不知道，npm 的时候也没有提示 导致浪费了我大半天时间， 最后我切换cnpm 安装 该插件的时候提示已经废弃，cnpm 友好的提示了需要使用新插件 PurgeCSSPlugin 完美解决 cnpm YYDS

解决方法：
由于 PurifyCSSPlugin 插件不兼容webpack5，建议换成PurgeCSSPlugin 插件，两个插件用法是一样的

PurgeCSSPlugin 用法：

npm i purgecss-webpack-plugin -D

const path = require('path')
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgeCSSPlugin = require('purgecss-webpack-plugin')

const PATHS = {
  src: path.join(__dirname, 'src')
}

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new PurgeCSSPlugin({
      // paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
     	// 可以换成熟悉的用法
     	 paths: glob.sync(path.join(__dirname, 'index.html')),
    })
    }),
  ]
}

踩坑不易，收藏点赞再走哈