bundle.js未找到 [Webpack]

Question

bundle.js未找到 [Webpack]

node.jsreactjswebpack

5

[更新] bundle.js 实际上是在内存中创建的。最好的方法是将 index.html 和 bundle.js（在 webpack.config.js 中配置）保存在同一个目录中，以避免任何问题。

我一直在尝试使用 webpack 渲染简单的 HTML 文件，但无法弄清楚为什么会出现 404 错误。我知道找不到 bundle.js，所以我尝试了不同的路径，但没有起作用，有什么建议吗？

感谢您的帮助。谢谢。

app.js

var express = require('express')
var path = require('path')

const app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html')

app.get('/', function (req, res) {
    res.render('index')
  })

app.listen(3000, () => console.log('Example app listening on port 3000!'))

webpack.config.js

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
[...]

index.html

<!DOCTYPE html>
<html>
  [...]
  <body>
      <div class="container"></div>
  </body>
  <script src="./bundle.js"></script>
</html>

文件夹结构

- Minh Pham

你如何编译"./src/index.js"？你需要使用Webpack打包工具来编译前端源代码。 - san

webpack以index.js作为入口，将其直接放入bundle.js中，但我想问题不在于此，问题在于渲染时找不到bundle.js。 - Minh Pham

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- manAbl · Accepted Answer

您没有正确指定您的index文件的路径。如果它在src目录中，代码将如下所示：

entry: [
    path.resolve(__dirname, 'src/index')
  ],
[...]

否则，如果您将其放在视图目录中，则代码将如下所示：

 entry: [
        path.resolve(__dirname, 'views/index')
      ],
    [...]

在你的html文件中有这样一行代码：<script src="/bundle.js"></script>

更新

根据你在Github上的代码，请尝试更改以下几行：

entry: [
    path.resolve(__dirname, 'src/index')
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
    output: {
    path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },

问题在于你在 entry point 和 devServer 中都没有使用 path.resolve(...)。希望能帮到你 :)