Using Webpack with React-router bundle.js Not Found

Answer 1

You are using a relative path to describe path of the bundle.js in your index.html.

You should use absolute path for bundle.js in your index.html

Absolute path contains the root directory and all other subdirectories in which a file or folder is contained.

If it's in the same path with your index.html.

eg.

public/index.html

public/bundle.js

This would solve your problem.

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

Answer 2

If you happen to be using the HtmlWebpackPlugin editing directly index.html is not an option. So, to fix this particular issue, add publicPath and specify / as the root folder inside webpack.config.js:

const path = require('path')

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  // more config stuff goes below..
} 

Don't forget to restart the webpack dev server for these changes to take effect

More info about publicPath here.

Answer 3

Adding <base href="/" /> to head tag of my index.html file before including any scripts worked for me.