当我使用自定义入口点时,为什么 webpack 无法找到react?

IT技术 javascript reactjs webpack webpack-dev-server
2021-05-17 22:44:09

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

import React from 'react';

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

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

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

import React from './react';

然后 webpack 无法构建并出现此错误:

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

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

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

所以 webpack 正在寻找 react inpath/to/my/而不是 in 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
}
1个回答

这个问题是由于<script>HTML 文件中标签指向源脚本的实际位置,而不是指向 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.jsmodule输出文件名中被设置如果它设置为其他东西,那就是那个。

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