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

Question

我正在尝试使用mini-css提取插件，但它不起作用。我找不到应该是正确的配置。我得到的是：[webpack-cli]无效的配置对象。已使用与API架构不匹配的配置对象初始化Webpack。configuration.plugins[2]应该是其中之一：object｛apply，…｝|函数object或instanceof Function类型的插件。详细信息：configuration.plugins[2]应该是一个对象：对象｛application，…｝插件实例。plugins[2]应该是函数的一个实例。函数充当插件。error命令失败，退出代码为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()])