Webpack 5中PurgeCss报错：PurgeCss不是构造函数问题求助

问题背景 #

基于Webpack 5搭建的项目，Scss转CSS、代码检查等功能正常，但PurgeCSS突然失效，运行Webpack时持续抛出「PurgeCss不是构造函数」错误。该功能此前可正常使用，仅在更新package.json修复依赖漏洞后出现故障。

问题原因 #

更新依赖后，purgecss-webpack-plugin的导出结构发生变化，原有错误的解构导入写法无法适配新版本，导致无法正确获取插件构造函数。

修复步骤 #

1. 修正插件导入方式
   purgecss-webpack-plugin为默认导出，而非命名导出，原代码的解构写法错误，应改为：

const PurgeCSSPlugin = require('purgecss-webpack-plugin');

2. 安装依赖包glob
   扫描项目文件路径需要依赖glob，执行安装命令：

npm install glob --save-dev

3. 正确初始化PurgeCSS插件
   取消注释相关代码，添加nodir: true避免扫描空目录，修正后代码片段：

const glob = require("glob");
const PurgeCSSPlugin = require("purgecss-webpack-plugin");

const PATHS = {
  src: path.join(__dirname, "../src"),
};
const PurgecssPlugin = new PurgeCSSPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});

4. 启用插件
   在module.exports中取消PurgecssPlugin的注释，确保插件被加入Webpack配置：

module.exports = {
  // ...其他插件
  PurgecssPlugin: PurgecssPlugin,
};

5. 验证版本兼容性
   确保purgecss-webpack-plugin与Webpack 5兼容，可更新至最新版：

npm install purgecss-webpack-plugin@latest --save-dev

完整修正后的配置片段 #

const path = require("path");
const glob = require("glob");
const _MiniCssExtractPlugin = require("mini-css-extract-plugin");
const _StyleLintPlugin = require("stylelint-webpack-plugin");
const _ESLintPlugin = require("eslint-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const _CopyPlugin = require("copy-webpack-plugin");
const PurgeCSSPlugin = require("purgecss-webpack-plugin");

const PATHS = {
  src: path.join(__dirname, "../src"),
};
const PurgecssPlugin = new PurgeCSSPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});

const MiniCssExtractPlugin = new _MiniCssExtractPlugin({
  filename: "[name].css",
  chunkFilename: "[id].css",
});

const ESLintPlugin = new _ESLintPlugin({
  overrideConfigFile: path.resolve(__dirname, ".eslintrc"),
  context: path.resolve(__dirname, "../src/js"),
  files: "**/*.js",
});

const StyleLintPlugin = new _StyleLintPlugin({
  configFile: path.resolve(__dirname, "stylelint.config.js"),
  context: path.resolve(__dirname, "../src/scss"),
  files: "**/*.scss",
  syntax: "scss",
});

const CopyPlugin = new _CopyPlugin({
  patterns: [
    {
      from: path.resolve(__dirname, "../src/img/"),
      to: path.resolve(__dirname, "../../project/public/img/"),
    },
    {
      from: path.resolve(__dirname, "../src/fonts/"),
      to: path.resolve(__dirname, "../../project/public/fonts/"),
    },
    {
      from: path.resolve(__dirname, "../src/index.php"),
      to: path.resolve(__dirname, "../../project/public/index.php"),
    },
  ],
});

module.exports = {
  CleanWebpackPlugin: new CleanWebpackPlugin(),
  MiniCssExtractPlugin: MiniCssExtractPlugin,
  PurgecssPlugin: PurgecssPlugin,
  ESLintPlugin: ESLintPlugin,
  StyleLintPlugin: StyleLintPlugin,
  CopyPlugin: CopyPlugin,
};

内容的提问来源于stack exchange，提问作者denOldTimer