運行 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"], }, ], }, };