Question

[更新] 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'
  },

问题在于您在path.resolve(...)和entry point具体

中错过了devServer

希望有帮助：）

找不到bundle.js [Webpack]

1 个答案: