webpack-cli ReferenceError: 要求未定义答案

【问题标题】：webpack-cli ReferenceError: require is not definedwebpack-cli ReferenceError: 要求未定义
【发布时间】：2023-03-10 23:05:01
【问题描述】：

问题是我的 webpack 配置使用 CommonJS 语法，但主要代码是用 ES6 编写的。但是根据我在网上看到的教程，这似乎是典型的设置。因此，虽然错误很明显，但我无法确定为什么这对我不起作用？我更喜欢将 CommonJS 用于 webpack，因为这是文档使用的。但我想使用 ES6 编写代码。

我的配置如下。包.json

{
    "name": "my-project",
    "version": "1.22.11",
    "type": "module",
    "dependencies": {
        "html-webpack-plugin": "^5.3.2",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router-dom": "^5.2.0"
    },
    "scripts": {
        "build": "webpack --config webpack/webpack.config.dev.js",
        "test": "jest",
        "dev": "yarn build && cross-env NODE_ENV=dev node ./src/index.js"
    },
    "devDependencies": {
        "@babel/preset-env": "^7.15.0",
        "@babel/preset-react": "^7.14.5",
        "babel-core": "^6.26.3",
        "babel-jest": "^26.6.3",
        "babel-loader": "^8.2.2",
        "cross-env": "^7.0.3",
        "css-loader": "^6.2.0",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.6",
        "enzyme-to-json": "^3.6.1",
        "jest": "^26.6.3",
        "mini-css-extract-plugin": "^2.2.0",
        "webpack": "^5.50.0",
        "webpack-cli": "^4.7.2"
    }
}

webpack 配置

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./index.js",
    target: "web",
    mode: "development",
    output: {
        filename: "bundle-web.js",
        path: path.resolve(__dirname, "../dist"),
    },
    plugins: [new HtmlWebpackPlugin(), new MiniCssExtractPlugin()],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: ["/node_modules/"],
                use: {
                    loader: "babel-loader",
                },
            },
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
        ],
    },
    resolve: {
        extensions: ["*", ".js", ".mjs"],
    },
};

babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Title</title>
</head>

<body>
    <div id="app"></div>
    <script src=bundle-web.js"></script>
</body>

</html>

index.js（专有代码除外）。

import * as React from 'react'; 
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; 
import ReactDOM from 'react-dom'; import './index.css';

节点版本：v13.14.0 操作系统：Windows 7。（是的，我知道应该更换它，但我不相信操作系统是这里的问题）。纱线：1.22.5

正如我在 dist 文件夹中看到的那样创建了包，但是当我运行“yarn dev”时

我收到以下错误。尝试了google、github、stackoverflow的各种解决方案，都不行。

webpack --config webpack/webpack.config.dev.js
webpack-cli] Failed to load \project\webpack\webpack.config.dev.js' config
webpack-cli] ReferenceError: require is not defined
   at file:///project/webpack/webpack.config.dev.js:1:14
   at ModuleJob.run (internal/modules/esm/module_job.js:110:37)
   at async Loader.import (internal/modules/esm/loader.js:179:24)
   at async importModuleDynamicallyWrapper (internal/vm/module.js:422:15)
   at async WebpackCLI.tryRequireThenImport (project\node_modules\webpack-cli\lib\webpack-cli.js:57:26)
   at async loadConfig project\webpack-cli\lib\webpack-cli.js:1536:27)
   at async project\webpack-cli\lib\webpack-cli.js:1589:36
   at async Promise.all (index 0)
   at async WebpackCLI.resolveConfig project\node_modules\webpack-cli\lib\webpack-cli.js:1587:38)
   at async WebpackCLI.createCompiler project\node_modules\webpack-cli\lib\webpack-cli.js:2045:22)

【问题讨论】：

标签： node.js reactjs webpack

【解决方案1】：

我正在回答我自己的问题，希望它可以帮助遇到同样问题的人。基本上问题是我的思维过程被颠倒了。您可以为整个代码库选择 ES6 或 Common JS。当您这样做时，包括 webpack 配置文件在内的所有文件都将被视为同一页面。通过定义 type: module，我说我所有的代码库，包括 webpack 配置现在都变成了 ES6 语法，因此我得到了上述错误。所以我删除了 type:module 声明我的所有代码库包括 webpack 配置文件都应该被视为 Common JS，即使我的源代码是用 ES6 编写的。然后我使用 babel 将我的实际源代码（不是 webpack 配置，因为它已经用普通 JS 编写）的 ES6 导入语句转换为普通 JS 并解决了这个问题，这不是一个问题，而是基本的误解。

第二种选择是使用 type:module 来声明它是 ES6，然后使用 import 语句和 ES6 等效代码来编写 webpack 配置。但是因为 Webpack 中的大多数示例都是普通的 JS，所以我选择了前一个选项，因为我对 JavaScript 有点陌生，我想避免像这样的任何基本错误。所以简而言之，我有一个误解，我希望这个评论对新手 JS 开发人员有所帮助。谢谢！

【讨论】：

【解决方案2】：

我还没有在节点 13.x 上验证这一点，但是在稳定的 14.x 及更高版本中，每当“type”定义为“module”值时，它会告诉 Node.js 将该包中的 .js 文件解释为使用 ES 模块语法，see documentation。

我会尝试从 package.json 中删除“模块”声明，并在 webpack 中坚持使用 CommonJS，或者在 webpack 中使用 import/export 子句，看看哪个效果最好。

不过，我还打算使用稳定的 nodejs 分支，即 14.x 或 16.x，因为 13.x 被认为是 unstable

【讨论】：

是的，如果我将类型声明为模块，那么我将不得不使用 ES6，这可能是最后的手段。但是我在教程和示例中看到了 webpack 常用的 CommonJS 和主要源代码的 ES6。我想知道是否有任何问题，因此我发布了这个问题。我可以在声明中更新它，谢谢。
我可能是错的，但我认为很多示例和教程都假设源代码将由打包程序进行转译和处理。
是的，你是对的，我花了一点时间才明白这一点。所以基本上 webpack 配置将使用 CommonJS 进行解释，但用 ES6 编写的主要源代码将使用 bable 转换为 common JS。删除“类型”：模块似乎已经解决了这个错误，但是我面临更多的 webpack 问题。完成后，我将为读者提供对原始问题的更新。

【解决方案3】：

在我的情况下，我遇到了同样的错误，我发现我错误地配置了 webpack.config.js 文件。提供的上下文和输出路径应该相同。

webpack.config.js

 module.exports={
        context: __dirname,
        entry: "./app.js",
        output: {
              path: __dirname + "/dist",
              filename:"bundle.js"
        }
    }

【讨论】：