Webpack: can't find bundle.js

Question

I've finally got the he dev server running and I get something on screen. I've setup a "start" script for NPM like this:

"start": "webpack-dev-server --content-base app"

I get an error:

http://localhost:8080/bundle.js Failed to load resource: the server responded with a status of 404 (Not Found)

My folders are set as follows:

appDir
  ->app
  ->node_modules
  webpack.config.js
  package.json

My webpack.config.js:

module.exports = {
    context: __dirname + '/app',
    entry: './index.js',
    output: {
        path: __dirname + '/app',
        filename: './bundle.js'
    }
}

Can you tell what's wrong?

Answer 1

bundle.js is located inside your /app directory. That path option in output specifies the absolute path that the file goes.

Also you don't need the ./ in filename. It will get resolved relatively to output.path but it is confusing and may have contributed to your problem.

Answer 2

The problem mostly with pointing bundle js in index.html. The reason webpack bundle.js is not found because you need to specify absolute path in index.html. Say suppose your bundle.js and index.html is generated under dist folder, then it should be something like below.

<script src="/bundle.js"></script>