当我使用mini-css-extract-plugin时，我得到[webpack-cli]无效的配置对象错误

Question

我正在尝试使用迷你css提取插件，但它不工作。我找不到正确的配置。我得到了这个: webpack-cli无效的配置对象。已使用与接口架构不匹配的配置对象初始化了Webpack。configuration.plugins2应为以下类型之一: object { apply，…}| object或instanceof函数类型的函数插件。详细信息: configuration.plugins2应为object: object { apply，…}插件实例。configuration.plugins2应该是function的实例。作为插件的函数。错误命令失败，退出代码为% 2。我是否只需要降级webpack或webpack-cli？还有其他问题吗？

webpack.common.js：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const devMode = process.env.NODE_ENV !== "production";

module.exports = {
    entry: {
        app: "./src/app.js",
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Expensify",
            template: "./src/index.html",
        }),
        [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
    ],
    output: {
        path: path.join(__dirname, "public"),
        filename: "bundle.js",
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            {
                loader: "babel-loader",
                test: /\.js$/,
                exclude: /node_modules/,
            },
            {
                test: /\.s?css$/,
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                ],
            },
        ],
    },
};

和package.json：

{
    "name": "expensify",
    "version": "1.0.0",
    "main": "index.js",
    "author": "Nagehan",
    "license": "MIT",
    "private": false,
    "scripts": {
        "serve": "live-server public/",
        "build:dev": "webpack serve --config webpack.dev.js",
        "build:prod": "webpack serve --config webpack.prod.js",
        "dev-server": "webpack serve",
        "test": "jest --config=jest.config.json"
    },
    "dependencies": {
        "@babel/cli": "^7.14.5",
        "@babel/core": "^7.14.6",
        "@babel/plugin-proposal-class-properties": "^7.14.5",
        "@babel/plugin-proposal-object-rest-spread": "^7.14.5",
        "@babel/preset-env": "^7.14.5",
        "@babel/preset-react": "^7.14.5",
        "babel-loader": "^8.2.2",
        "css-loader": "^5.2.6",
        "css-minimizer-webpack-plugin": "^3.0.2",
        "enzyme": "^3.11.0",
        "enzyme-to-json": "^3.6.2",
        "html-loader": "^2.1.2",
        "html-webpack-plugin": "^5.3.2",
        "jest": "^27.0.5",
        "live-server": "^1.2.1",
        "mini-css-extract-plugin": "^1.6.2",
        "moment": "^2.29.1",
        "node-sass": "^6.0.0",
        "normalize.css": "^8.0.1",
        "raf": "^3.4.1",
        "react": "^17.0.2",
        "react-addons-shallow-compare": "^15.6.3",
        "react-dates": "^21.8.0",
        "react-dom": "^17.0.2",
        "react-modal": "^3.14.3",
        "react-redux": "^7.2.4",
        "react-router-dom": "^5.2.0",
        "react-test-renderer": "^17.0.2",
        "redux": "^4.1.0",
        "sass-loader": "^12.1.0",
        "style-loader": "^2.0.0",
        "uuid": "^8.3.2",
        "validator": "^13.6.0",
        "webpack": "^5.39.0",
        "webpack-dev-server": "^3.11.2",
        "webpack-merge": "^5.8.0"
    },
    "devDependencies": {
        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
        "webpack-cli": "^4.7.2"
    }
}

Answer 1

也许你已经找到了一个解决方案，但如果没有，这可能会对你有所帮助。

通过在插件数组内的空数组上调用concat，您总是可以添加一个数组。插件中的数组是未扩展的。因此，一种解决方案是直接调用plugins数组上的concat()：

plugins: [
  new HtmlWebpackPlugin({
    title: "Expensify",
    template: "./src/index.html",
  })
].concat(devMode ? [] : [new MiniCssExtractPlugin()])