找不到 bundle.js [Webpack]

Question

[UPDATE] 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>

文件夹结构

Answer 1

您没有为index 文件指定正确的路径。如果您将它放在src directory 上，代码将如下所示：

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

否则，如果您在 views directory, 他们上有它，代码将如下所示：

 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(...)

希望有帮助:)