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

问题描述

我正在尝试使用迷你 css 提取插件，但它不起作用。我找不到什么应该是正确的配置。我得到这个：[webpack-cli] 无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。 configuration.plugins[2] 应该是以下之一：对象 { 申请，... } |功能类型为 object 或 instanceof Function 的插件。细节： 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"
    }
}

解决方法

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

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

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

mini-css-extract-plugin webpack webpack webpack