运行 npm start 时出现 Webpack css 加载器错误

Question

当我在我的项目上运行 npm start 时，我收到一条错误消息：

[webpack-cli] 无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。

• 配置有一个未知的属性“模块”。 这些属性是有效的：object { amd?、baail?、cache?、context?、dependencies?、devServer?、devtool?、entry?、experiments?、externals?、externalsPresets?、externalsType?、ignoreWarnings?、infrastructureLogging?、loader ?，模式？，模块？，名称？，节点？，优化？，输出？，并行性？，性能？，插件？，配置文件？，记录输入路径？，记录输出路径？，记录路径？，解析？，resolveLoader？，快照？， stats?, target?, watch?, watchOptions? } -> 用户提供的选项对象。 对于错别字：请更正。 对于加载器选项： webpack >= v2.0.0 不再允许在配置中自定义属性。 应该更新加载器以允许通过 module.rules 中的加载器选项传递选项。 在加载器更新之前，可以使用 LoaderOptionsPlugin 将这些选项传递给加载器： plugins: [ new webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // 可能仅适用于某些模块 options: { modules: ... } }) ]

我已经更新了 webpack (v5) 并按照 webpack v5 doc on css loader ( https://webpack.js.org/api/loaders/#thisgetoptionsschema ) 的说明进行操作，我的 webpack.config.js 如下所示：

webpack.config.js

const path = require("path");
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    },
    modules: {
        rules: [
            { 
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],            
            },
        ],
    },
};

索引.js

import {run} from "./app/app";
import "./main.css";
import { AlertService } from "./app/alert.service";
import { ComponentService } from "./app/component.service";
const alertService = new AlertService();
const componentService = new ComponentService();
run(alertService, componentService);

主文件

body{
    background-color: purple;
}

开发依赖

 "devDependencies": {
    "css-loader": "^6.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.61.0",
    "webpack-cli": "^4.9.1"
  }

有人可以帮我吗。

Answer 1

除了一个对象键外，一切看起来都很好。 根据 webpack 配置，你的加载器应该在规则数组中，这是模块对象的关键。

在您的配置文件中，您有modules而不是module 。 请更改它并让我知道它是否有效:)

正确的配置

 const path = require("path"); module.exports = { mode: "development", entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\\.css$/i, use: ["style-loader", "css-loader"], }, ], }, };