当我使用自定义入口点时，为什么 webpack 无法找到 React？

我在 Webpack 中设置了一个自定义入口点，但在我的 React 代码行中收到错误：

import React from 'react';

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

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

但是，当我按照建议将路径更改为：

import React from './react';

然后 webpack 无法构建并给出以下错误：

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

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

获取http://localhost:9000/path/to/my/file/react net::ERR_ABORTED 404（未找到）

所以webpack正在寻找reactpath/to/my/而不是在node_modules正如它应该。

My webpack.config.js看起来像这样：

//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
}

and package.json

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

这个问题是由<script>HTML 文件中的标记指向源脚本的实际位置，而不是指向 webpack 创建的编译输出文件。

这是错误的：

<script src="/path/to/my/file.js"></script>

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

这是对的：

<script src="bundle.js"></script>

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

名字的由来是bundle.js是因为这就是它恰好被设置为的webpack.config.js模块输出文件名。如果设置为其他内容，那就是这样。

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