当我使用 mini-css-extract-plugin 我得到 [webpack-cli] Invalid configuration object 错误

Question

我正在尝试使用迷你 css 提取插件，但它不起作用。我找不到正确的配置。我得到这个：[webpack-cli] 无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 configuration.plugins[2] 应该是其中之一：对象 { 应用，... } |功能对象或 instanceof 函数类型的插件。细节： configuration.plugins[2] 应该是一个对象：对象 { 应用，... } 插件实例。 configuration.plugins[2] 应该是一个函数实例。作为插件的功能。错误命令失败，退出代码为 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，您总是会添加一个数组。插件中的数组未扩展。因为这个解决方案是直接在插件数组上调用 concat()：

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

当我使用 mini-css-extract-plugin 我得到 [webpack-cli] Invalid configuration object 错误

when I use mini-css-extract-plugin I get [webpack-cli] Invalid configuration object error

webpack

mini-css-extract-plugin