Python/React Webpack (webpack-cli)“错误：ENOENT：没有这样的文件或目录”

Question

我正在尝试使用pipenv shell、python运行标准，

npm run dev

，但我遇到了一些奇怪的事情。

现在有一个重要的点需要注意，那就是，当我之前做一些工作时，我发现我的一个目录命名错误，所以我将“main.js”文件移动到一个目录中，使得更新目录结构，然后将文件“main.js”放回到适当的文件夹中。

当我运行

npm run dev

命令时，我收到此错误：

> [email protected] dev2
> webpack --mode development ./leadmanager/frontend/scripts/index.js -o ./leadmanager/frontend/static/frontend/main.js

[webpack-cli] [Error: ENOENT: no such file or directory, open 'C:\Users\Steph\python_tuts\lead-manager\leadmanager\frontend\static\frontend\main.js\main.js'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Users\\Steph\\python_tuts\\lead-manager\\leadmanager\\frontend\\static\\frontend\\main.js\\main.js'
}

虽然我可以理解我所做的目录更改可能会产生导致这种情况的影响，但正如您从控制台反馈的第二行并与错误相比可以看到的那样，命令和错误不是指向同一目录。

我找不到返回的错误被定向到不存在的已删除目录的原因。您会注意到 main.js 有一个双重引用

..frontend\\main.js\\main.js

在我的一生中，我一直在研究迄今为止编写的应用程序，这反映了应用程序以前的状态。我不知道为什么它仍然试图去那里。

您将在下面找到该文件的完整内容

package.json

。不过，我还在我的 github 中附加了一个指向 repo 的链接。

{
  "name": "lead-manager",
  "version": "1.0.0",
  "description": "Steve Smith - Python/React Tutorial",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development ./leadmanager/frontend/src/index.js -o ./leadmanager/frontend/static/frontend/main.js",
    "build": "webpack --mode production ./leadmanager/frontend/src/index.js -o ./leadmanager/frontend/static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  
  "devDependencies": {
    "@babel/core": "^7.24.0",
    "@babel/preset-env": "^7.24.0",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

我有预感这很简单，请指教。

Answer 1

您遇到的错误表明 webpack 命令中的路径配置存在问题。该错误消息表明 webpack 正在尝试将 main.js 文件输出到包含 main.js 作为目录本身而不是文件的目录路径。这就是为什么您看到路径重复的原因（...frontend/main.js/main.js）。

根据错误和您共享的 package.json 脚本，问题似乎可能在于 webpack 如何解释开发脚本中的输出路径。以下是诊断和解决问题的分步方法：

Webpack 配置

如果路径正确并且问题仍然存在，下一步是确保正确设置您的 webpack 配置文件（通常是 webpack.config.js）。由于 package.json 没有显式引用 webpack 配置文件，因此除非项目根目录中存在 webpack.config.js 文件，否则 webpack 将使用默认行为。

webpack.config.js 修改如下。

const path = require('path');

module.exports = {
    entry: './leadmanager/frontend/src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'leadmanager/frontend/static/frontend'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                    },
                },
            },
        ],
    },
};

我们修改了webpack.config.js，而webpack只允许进入一次，所以我们修改package.json如下。

"script" : {
  "dev": "webpack --mode development"
}

这样你就可以期待它正常工作了。我实际上克隆了你的 GitHub 并验证了它工作正常。