【问题标题】:Webpack 5 - PurgeCss - Not a Constructor ErrorWebpack 5 - PurgeCss - 不是构造函数错误
【发布时间】:2023-01-04 07:04:49
【问题描述】:

Webpack 5、PurgeCss、Purgecss-webpack-plugin、

你好呀, 我使用创建了一个项目网页包 5处理Scss => CSS转换加上更多。
我已经做好了一切工作,但清除CSS.
我一直收到错误PurgeCss 不是构造函数当我运行 Webpack 时。
有趣的是,这曾经有效,但自从我更新了 package.json 文件以消除漏洞后,它现在崩溃了。
The full code can be found on the GitHub repo.
如果有人能告诉我原因,我将不胜感激,谢谢。

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}/**/*`),
// });

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"),
  //configBasedir: path.resolve(__dirname, "./node_modules/"),
  context: path.resolve(__dirname, "../src/scss"),
  files: "**/*.scss",
  syntax: "scss",
});

/**
 * If getting an error during npm start or watch it's
 * most posable because the src/fonts or src/img folders are empty
 */
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,
};

【问题讨论】:

    标签: webpack


    【解决方案1】:

    所以显然这是一个 webpack-purgecss-plugin 5.0 问题,因为 webpack 5.0 所以我将插件降级到 4.1.3 并且它再次工作。

    【讨论】:

      【解决方案2】:

      https://github.com/FullHuman/purgecss/issues/994所述

      将导入更新为确切的大小写

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

      似乎修复它!

      【讨论】:

        猜你喜欢
        • 2018-05-01
        • 1970-01-01
        • 1970-01-01
        • 2017-07-27
        • 2019-08-11
        • 1970-01-01
        • 2022-06-25
        • 1970-01-01
        • 2022-06-11
        相关资源
        最近更新 更多