webpack-dev-server - webpack 开发服务器 ReferenceError 要求未定义

Question

升级到 webpack 5 时，即使编译成功（webpack 5.49.0 编译成功），我也会在浏览器中收到以下错误（参见图片）。为什么会出现此错误，我该如何解决？

Uncaught ReferenceError: require is not defined
    at eval (urls.js:20)
    at ./resources/assets/js/api/urls.js (main.js:8166)
    at Module.options.factory (main.js:9146)
    at __webpack_require__ (main.js:8536)
    at fn (main.js:8802)
    at eval (apiCallMiddleware.js:15)
    at ./resources/assets/js/api/apiCallMiddleware.js (main.js:8144)
    at Module.options.factory (main.js:9146)
    at __webpack_require__ (main.js:8536)
    at fn (main.js:8802)

这是我的webpack.config.js

const path = require("path");
const { URL } = require("url");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const webpack = require("webpack");

const host = process.env.DEV_RESOURCE_URL || "http://localhost:8080/";
const hostURL = new URL(host);
const mode = process.env.NODE_ENV || "production";
const isDevelopment = mode !== "production";

module.exports = {
    mode,
    entry: "./resources/assets/js/app.js",
    output: {
        path: path.resolve(__dirname, "public"),
        filename: isDevelopment ? "js/[name].js" : "js/[name].[contenthash].js",
        chunkFilename: "js/[id].[contenthash].js",
        crossOriginLoading: "anonymous",
    },
    module: {
        rules: [
            {
                test: /\.(c?js|mjs|jsx?|tsx?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/preset-env",
                                "@babel/preset-typescript",
                                "@babel/preset-react",
                            ],
                            plugins: [
                                "@babel/plugin-syntax-dynamic-import",
                                "@babel/plugin-proposal-object-rest-spread",
                                "@babel/plugin-transform-runtime",
                                "syntax-dynamic-import",
                                "@babel/plugin-proposal-optional-chaining",
                                "@babel/plugin-proposal-nullish-coalescing-operator",
                                isDevelopment &&
                                    require.resolve("react-refresh/babel"),
                            ].filter(Boolean),
                        },
                    },
                ],
                // https://github.com/webpack/webpack/issues/11467#issuecomment-691873586
                // Potentially this needs to go within a Rule above
                resolve: {
                    fullySpecified: false,
                },
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "images",
                        },
                    },
                    "img-loader",
                ],
            },
            {
                test: /\.(css)$/,
                use: ["css-loader"],
            },
            { test: /\.(scss)$/, use: ["sass-loader"] },
        ],
    },
    plugins: [
        // https://github.com/pmmmwh/react-refresh-webpack-plugin#usage
        isDevelopment && new webpack.HotModuleReplacementPlugin(),
        isDevelopment && new ReactRefreshWebpackPlugin(),
    ].filter(Boolean),
    resolve: {
        extensions: [".tsx", ".ts", ".js", ".jsx", ".vue", "*"],
        fallback: {
            zlib: require.resolve("browserify-zlib"),
            stream: require.resolve("stream-browserify"),
            path: require.resolve("path-browserify"),
        },
    },
    devServer: {
        headers: {
            "Access-Control-Allow-Origin": "*",
        },
    },
    watchOptions: {
        ignored: "/node_modules/",
    },
};

我最初在升级 Laravel mix 时遇到了同样的错误。我想如果我放弃 mix 并编写自己的 webpack 配置，我可以修复错误。一旦我设置好所有东西（如下所示），它就会出现与全新混合升级相同的错误。我完全被卡住了，浪费了很多时间试图让 webpack 升级到 v5。

标签： webpack-dev-serverlaravel-mix