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

Question

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

import React from 'react';

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

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

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

import React from './react';

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

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 控制台错误：

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

所以 webpack 在 path/to/my/ 而不是 node_modules 中寻找反应。

我的 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
}

和package.json

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

Answer 1

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

这是错误的：

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

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

这是正确的：

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

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

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

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

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

Why is webpack unable to find react when I'm using a custom entry point?

javascript

reactjs

webpack

webpack-dev-server