找不到bundle.js [Webpack]

Min*_*ham 5 node.js reactjs webpack

[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!'))
Run Code Online (Sandbox Code Playgroud)

webpack.config.js

module.exports = {
  entry: ['./src/index.js'],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
[...]
Run Code Online (Sandbox Code Playgroud)

的index.html

<!DOCTYPE html>
<html>
  [...]
  <body>
      <div class="container"></div>
  </body>
  <script src="./bundle.js"></script>
</html>
Run Code Online (Sandbox Code Playgroud)

文件夹结构

在此输入图像描述

man*_*Abl 2

您没有指定正确的index文件路径。如果你有它,src directory代码将如下所示:

entry: [
    path.resolve(__dirname, 'src/index')
  ],
[...]
Run Code Online (Sandbox Code Playgroud)

否则,如果你有它,views directory,代码将如下:

 entry: [
        path.resolve(__dirname, 'views/index')
      ],
    [...]
Run Code Online (Sandbox Code Playgroud)

在你的 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'
  },
Run Code Online (Sandbox Code Playgroud)

问题在于你path.resolve(...)在你的entry point和你的devServer具体情况中都错过了

希望有帮助:)