Reactjs 使用Express设置Webpack 5模板

我正在尝试使用webpack 5和express设置一个新的react应用程序模板，但每当我运行build命令时，都会出现以下错误：

✖ ｢wds｣：配置对象无效。已使用与API架构不匹配的配置对象初始化Web包

• configuration.module.rules[2]应该是以下规则之一： [“…”|对象{编译器？、依赖项？、描述数据？、强制执行？、排除？、生成器？、包含？、颁发者？、颁发者层？、层？、加载程序？、mimetype？、其中一个、选项？、PAR er？，realResource？，resolve？，resource？，resourceFragment？，resourceQuery？，规则？，副作用？，测试？，类型？，使用？}，…] ->规则。 细节：
  • configuration.module.rules[2]。加载程序应为非空字符串。 ->加载程序请求

请问对如何修理它有什么建议吗

这里是我的模板：

webpack.config.js

    const path = require("path");
    const webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const Dotenv = require("dotenv-webpack");
    
    const fs = require("fs");
    const appDirectory = fs.realpathSync(process.cwd());
    const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
    
    module.exports = {
        entry: resolveApp("src/app.jsx"),
        output: {
            path: resolveApp("dist"),
            filename: "bundle.js",
            publicPath: "",
        },
        mode: "development",
        devtool: "eval",
        module: {
            rules: [{
                    test: /\.(png|svg|jpg|jpeg|webp)$/,
                    use: ["file-loader"],
                },
                {
                    // look for .js or .jsx files
                    test: /\.(js|jsx)$/,
                    // in the `src` directory
                    include: resolveApp("src"),
                    exclude: /(node_modules)/,
                    use: {
                        // use babel for transpiling JavaScript files
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/react"],
                        },
                    },
                },
                {
                    test: /\.css$/,
                    loader: ["style-loader", "css-loader"],
                },
                {
                    test: /\.s(a|c)ss$/,
                    use: [{
                            loader: "style-loader",
                        },
                        {
                            loader: "css-loader",
                            options: {
                                importLoaders: 2,
                                modules: { auto: true },
                            },
                        },
                        {
                            loader: "sass-loader",
                        },
                    ],
                },
            ],
        },
        devServer: {
            contentBase: path.resolve("src"),
            hot: true,
            open: true,
            port: 8000,
            watchContentBase: true,
            historyApiFallback: true,
            proxy: {
                "/api": {
                    target: "http://localhost:4000",
                    secure: false,
                },
            },
        },
        plugins: [
            new Dotenv(),
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                template: __dirname + "/src/index.html",
                filename: "index.html",
                inject: "body",
            }),
        ],
        resolve: {
            // File extensions. Add others and needed (e.g. scss, json)
            extensions: [".js", ".jsx"],
            modules: ["node_modules"],
            // Aliases help with shortening relative paths
            alias: {
                Components: path.resolve(resolveApp("src"), "components"),
                Containers: path.resolve(resolveApp("src"), "containers"),
                Utils: path.resolve(resolveApp("src"), "utils"),
            },
        },
        performance: {
            hints: false,
        },
    };

---

网页包配置中第三个加载程序的配置无效。目前是:

{
  test: /\.css$/,
  loader: ['style-loader', 'css-loader']
}

键

loader

必须是字符串（相对于某些节点模块或绝对

.js

文件路径）。如果要链接多个装载机，应使用：

{
  test: /\.css$/,
  loader: ['style-loader', 'css-loader']
}

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}