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

【问题标题】：Why is webpack unable to find react when I'm using a custom entry point?当我使用自定义入口点时，为什么 webpack 无法找到响应？
【发布时间】：2020-06-26 03:13:55
【问题描述】：

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

import React from 'react';

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

未捕获的 TypeError：无法解析模块说明符“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 控制台错误：

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

所以 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
}

【问题讨论】：

标签： javascript reactjs webpack webpack-dev-server

【解决方案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'
},

【讨论】：