当我使用自定义入口点时，为什么 webpack 无法找到反应? [英] Why is webpack unable to find react when I'm using a custom entry point?

问题描述

我在 Webpack 中设置了一个自定义入口点，但在我的 React 代码的这一行出现错误:

I set up a custom entry point in Webpack but am getting an error on this line of my React code:

从'react'导入React;

Webpack 能够构建它，但它没有拦截该路径，因为 Chrome 给了我这个控制台错误:

Webpack is able to build it, but itsnt intercepting that path because Chrome gives me this console error:

未捕获的类型错误:无法解析模块说明符react".相对引用必须以/"、./"或../"开头

Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../"

但是，当我按照建议更改路径时:

However, when I change the path as suggested to:

从'./react'导入React；

然后 webpack 无法构建并给出这个错误:

Then webpack is unable to build and gives this error:

./path/to/my/file.js 模块中的错误未找到:错误:无法解析'./react' 在 '/Users/me/Documents/GitHub/myProject/path/to/my @./path/to/my/file.js 3:0-28

ERROR in ./path/to/my/file.js Module not found: Error: Can't resolve './react' in '/Users/me/Documents/GitHub/myProject/path/to/my @ ./path/to/my/file.js 3:0-28

此外，我收到此 Chrome 控制台错误:

And furthermore I get this Chrome console error:

GET http://localhost:9000/path/to/my/file/react net::ERR_ABORTED 404(未找到)

GET http://localhost:9000/path/to/my/file/react net::ERR_ABORTED 404 (Not Found)

所以 webpack 正在 path/to/my/ 中寻找 react，而不是在 node_modules 中.

So webpack is looking for react in path/to/my/ instead of in node_modules as it should.

我的 webpack.config.js 看起来像这样:

My webpack.config.js looks like this:

//snip
module.exports = {
    entry: './path/to/my/file.js',
    output: {
        path:  path.join(__dirname, '/build'),
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.join(__dirname, '/'),
        port: 9000
    },
//snip
}

和 package.json

{
  //snip
  "main": "path/to/my/file.js",
  //snip
}

推荐答案

这个问题是由 HTML 文件中的

^ 那是指向存储库中实际位置的原始源代码.它不是由 webpack 处理的，也不是由 babel 编译的，它只是一个由浏览器处理的普通 javascript 文件，它解释了浏览器错误.

^ That is pointing to the raw source code in its actual location in the repository. It isn't handled by webpack and isn't compiled by babel, it's just a plain javascript file handled by the browser, which explains the browser errors.

这是正确的:

^ 指向 webpack 根据配置生成的编译输出.在开发服务器中，没有名为 bundle.js 的实际文件，该文件位于内存中，该文件的路径就是开发服务器，例如类似于 http://localhost:8000.

^ that is pointing to the compiled output that webpack generates based on the configuration. In the dev server, there is not an actual file called bundle.js, the file lives in memory, and the path to that file is just the dev server, e.g. something like http://localhost:8000.

名称是 bundle.js 的原因是因为它恰好在 webpack.config.js 模块输出文件名中设置为.如果它被设置为其他东西，那就是那个.

The reason the name is bundle.js is because that's what it happens to be set to in webpack.config.js module output filename. If it's set to something else, it will be that.

output: {
  path:  path.join(__dirname, '/build'),
  publicPath: '/',
  filename: 'bundle.js'
},

这篇关于当我使用自定义入口点时，为什么 webpack 无法找到反应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！