使用 Express 设置 Webpack 5 模板

Question

我正在尝试使用 webpack 5 和 express 设置一个新的 React 应用程序模板，但是每当我使用运行构建命令时，我都会收到此错误：

✖「wds」：无效的配置对象。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。

configuration.module.rules[2] 应该是以下之一： [“……” | object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, pars 呃？, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }, ...] -> 一条规则。细节：
- configuration.module.rules[2].loader 应该是一个非空字符串。 -> 加载程序请求。

请问有什么解决办法吗？

这是我的模板：

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,
        },
    };

index.js

    require("dotenv").config();
    const express = require("express");
    const bodyParser = require("body-parser");
    const cookieParser = require("cookie-parser");
    const cors = require("cors");
    
    const app = express();
    app.use(express.static(`${__dirname}/dist`));
    
    app.use(express.json());
    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(cookieParser());
    app.use(cors());
    
    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header(
            "Access-Control-Allow-Headers",
            "Origin, X-Requested-With, Content-Type, Accept"
        );
        next();
    });
    
    app.get("/*", (req, res) => res.sendFile(`${__dirname}/dist/index.html`));
    
    app.listen(process.env.PORT || 4000, () =>
        console.log(`Up and running on port ${process.env.PORT}`)
    );
    
    module.exports = app;

Answer 1

你的Webpack配置中第三个loader的配置无效。目前是：

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

键 loader 必须是字符串（相对于某些节点模块或绝对 .js 文件路径）。当你想链接多个加载器时，你应该使用 use property:

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

使用 Express 设置 Webpack 5 模板

Setting up Webpack 5 template with Express

reactjs

express

webpack

webpack-dev-server