Running "npm run webpack"I get a "TypeError: CleanWebpackPlugin is not a constructor"

Question

我正在运行宁 asp.net 核心 2.2 与 Aurelia 前端 - SPA。

我在核心 3.0 中有这个运行ning 但是我不得不降级到运行 OData（他们还没有把它放入那个版本）。

我打开了一个 CMD 并输入了 npm run webpack:watch 但失败了所以我在 SO 中查找了错误的第一行并得到了 this，但是这不是语法问题 - 我有正确的语法。

(已安装webpack，版本为4.38.0)

错误详情：

TypeError: CleanWebpackPlugin is not a constructor
    at module.exports (C:\AURELIA - ODATA\OLD\JobsLedger.API\webpack.config.js:73:4)
    at handleFunction (C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\bin\utils\prepareOptions.js:21:13)
    at prepareOptions (C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\bin\utils\prepareOptions.js:9:5)
    at requireConfig (C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\bin\utils\convert-argv.js:119:14)
    at C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\bin\cli.js:71:45
    at Object.parse (C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack-cli\bin\cli.js:365:3)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Module.require (internal/modules/cjs/loader.js:666:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (C:\AURELIA - ODATA\OLD\JobsLedger.API\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:759:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:770:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at Function.Module._load (internal/modules/cjs/loader.js:555:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:826:10)
    at internal/main/run_main_module.js:17:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Jobsledger.API@0.0.0 webpack:watch: `webpack --mode development --watch`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Jobsledger.API@0.0.0 webpack:watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\simon\AppData\Roaming\npm-cache\_logs19-07-30T07_45_40_798Z-debug.log

这与我的 webpack 文件有关，因为它抱怨 CleanWebPackPlugin is not a constructor 但是在检查语法正确后它必须是其他东西..

为了完整起见，这里是 webpack.config.js 文件：

const path = require("path");
const webpack = require("webpack");
const { AureliaPlugin, ModuleDependenciesPlugin, GlobDependenciesPlugin } = require("aurelia-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const bundleOutputDir = "./wwwroot/dist";

module.exports = (env, argv) => {
    if ((!argv || !argv.mode) && process.env.ASPNETCORE_ENVIRONMENT === "Development") {
        argv = { mode: "development" };
    }
    console.log("mode =", argv.mode);
    const isDevBuild = argv.mode !== "production";
    const cssLoaders = ["css-loader", "postcss-loader"];
    const scssLoaders = [...cssLoaders, "sass-loader"];

    return [{
        target: "web",
        mode: isDevBuild ? "development" : "production",
        entry: { "app": ["es6-promise/auto", "aurelia-bootstrapper"] },
        resolve: {
            extensions: [".ts", ".js"],
            modules: ["ClientApp", "node_modules"]
        },
        output: {
            path: path.resolve(bundleOutputDir),
            // Asp.Net JavaScriptServices does not tolerate "/" in public path, see https://github.com/aspnet/JavaScriptServices/issues/1495
            publicPath: "dist/",
            filename: "[name].[hash].js",
            chunkFilename: "[name].[chunkhash].js",
            pathinfo: false
        },
        module: {
            rules: [
                { test: /\.(woff|woff2|png|eot|ttf|svg)(\?|$)/, use: { loader: "url-loader", options: { limit: 1, publicPath: "./" } } },
                { test: /\.ts$/i, include: [/ClientApp/], loader: "ts-loader" },
                { test: /\.html$/i, use: "html-loader" },
                { test: /\.css$/i, /*include: [/node_modules/],*/ issuer: /\.html$/i, use: cssLoaders },
                { test: /\.css$/i, /*include: [/node_modules/],*/ exclude: [/bootstrap.css$/, /font-awesome.css$/], issuer: [{ not: [{ test: /\.html$/i }] }], use: ["style-loader", ...cssLoaders] },
                { test: /\.css$/, include: [/bootstrap.css$/, /font-awesome.css$/], use: [{ loader: MiniCssExtractPlugin.loader }, ...cssLoaders] },
                { test: /\.scss$/i, issuer: /(\.html|empty-entry\.js)$/i, use: scssLoaders },
                { test: /\.scss$/i, issuer: /\.ts$/i, use: ["style-loader", ...scssLoaders] }
            ]
        },
        optimization: {
            splitChunks: {
                chunks: "all",
                // comment the following to avoid creatin a separate bundle for each npm module
                maxInitialRequests: Infinity,
                minSize: 0,
                cacheGroups: {
                    vendor: {
                        test: /[\/]node_modules[\/]/,
                        name(module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];

                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `npm.${packageName.replace('@', '')}`;
                        }
                    }
                }
            }
        },
        devtool: isDevBuild ? "source-map" : false,
        performance: {
            hints: false
        },
        plugins: [
            new CleanWebpackPlugin(),
            new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
            new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }),
            new HtmlWebpackPlugin({ template: 'index.ejs', filename: "../../wwwroot/index.html", inject: false, metadata: {}, alwaysWriteToDisk: true }),
            new AureliaPlugin({ aureliaApp: "boot" }),
            new GlobDependenciesPlugin({ "boot": ["ClientApp/**/*.{ts,html}"] }),
            new ModuleDependenciesPlugin({}),
            new MiniCssExtractPlugin({
                filename: "[name].[hash].css",
                chunkFilename: "[name].[chunkhash].css"
            })
        ],
        devServer: {
            contentBase: "wwwroot/",
            compress: true,
            writeToDisk: true,
            hot: false
        }
    }];
};

有什么想法吗？

Answer 1

尝试更改为

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

Running "npm run webpack"I get a "TypeError: CleanWebpackPlugin is not a constructor"

Running "npm run webpack"I get a "TypeError: CleanWebpackPlugin is not a constructor"

asp.net-core

webpack

aurelia