文章/答案/技术大牛

发布

社区首页 >问答首页 >webpack-cli ReferenceError:未定义请求

问webpack-cli ReferenceError:未定义请求
EN

Stack Overflow用户

提问于 2021-08-15 22:14:58

回答 3查看 667关注 0票数 0

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

我的配置如下。Package.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';

Node版本: v13.14.0操作系统:Windows7。(是的，我知道应该替换它，但我不认为操作系统是问题所在)。纱线: 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

回答 3

Stack Overflow用户

发布于 2021-09-19 01:41:22

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

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

票数 2

Stack Overflow用户

发布于 2021-08-15 22:46:47

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

我要么试着去掉package.json中的“CommonJS”声明，在webpack中坚持使用模块，要么在webpack中使用import/export子句，看看哪个效果最好。

然而，我的目标也是使用稳定的nodejs分支，即14.x或16.x，因为13.x被认为是unstable

票数 0

Stack Overflow用户

发布于 2021-10-27 07:17:31

在我的例子中，我得到了同样的错误，并且我发现我错误地配置了webpack.config.js文件。为输出提供的上下文和路径应该相同。

webpack.config.js

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68795696

复制

相似问题

问webpack-cli ReferenceError:未定义请求
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问webpack-cli ReferenceError:未定义请求EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问webpack-cli ReferenceError:未定义请求
EN