找不到bundle.js [Webpack]

Question

[UPDATE] bundle.js was actually created in memory. [UPDATE] bundle.js实际上是在内存中创建的。 The best way is to keep index.html and bundle.js (configured in webpack.config.js) in the same directory to avoid any issue. 最好的方法是将index.html和bundle.js（在webpack.config.js中配置）保存在同一目录中以避免任何问题。

I have been trying to render a simple html file with webpack but can't figure out why I'm getting a 404. I understand that bundle.js could not be found so I tried different paths but it didn't work, any ideas? 我一直试图用webpack渲染一个简单的html文件，但无法弄清楚为什么我得到404.我明白找不到bundle.js所以我尝试了不同的路径，但它没有用，任何想法？

I would appreciate your help. 我很感激你的帮助。 Thanks. 谢谢。

app.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 webpack.config.js

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

index.html 的index.html

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

Folder structure 文件夹结构

Answer 1

You don't have specified a correct path to your index file. 您没有指定index文件的正确路径。 If you have it on a src directory the code will look like this: 如果你在src directory有它，代码将如下所示：

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

Otherwise if you have it on your views directory, them the code will be the following: 否则，如果您在views directory,有它views directory,则代码将如下所示：

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

And in your html file is <script src="/bundle.js"></script> 在您的html文件中是<script src="/bundle.js"></script>

UPDATE UPDATE

Base on your code at github try changing the following lines 根据您在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'
  },

The problem consist in that you're missing the path.resolve(...) in both your entry point and your devServer specifically 问题在于您在entry point和devServer特别缺少path.resolve(...)

Hope helps :) 希望有帮助:)

找不到bundle.js [Webpack]

问题描述

1 个解决方案

解决方案1
1 2018-06-09 14:34:42

找不到bundle.js [Webpack]

问题描述

1 个解决方案

解决方案1 1 2018-06-09 14:34:42

解决方案1
1 2018-06-09 14:34:42