Webpack Build Can't Find CSS or JS Bundles

When trying to run my build script for the first time, I noticed that while the files were created, if I try to open the index.html file in the build directory it can't find any of the CSS or JS bundle files, even though they're in the build directory. Here's my webpack.config:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const extractSass = new ExtractTextPlugin({
    filename: '[name].[contenthash].css',
    disable: process.env.NODE_ENV === 'development'
});

const VENDOR_LIBS = [
    'react',
    'react-dom',
    'react-router',
    'react-router-dom'
];

module.exports = {
    entry: {
        bundle: ['babel-polyfill', './src/index.js'],
        vendor: VENDOR_LIBS
    },
    output: {
        path: path.join(__dirname, 'build'),
        publicPath: '/',
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                include: [path.resolve(__dirname, 'src')],
                query: {
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'stage-0', 'react']
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract([
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ])
            },
            {
                test: /\.png$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: { limit: 40000 }
                    },
                    {
                        loader: 'image-webpack-loader',
                        query: { bypassOnDebug: true }
                    }
                ]
            }
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [autoprefixer]
            }
        }),
        extractSass
    ]
};

And my index.html file in the build folder:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-
  scale=1">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="/bundle.9e0f7c3719625da97504e3ec5c2054db.css" rel="stylesheet"></head>
<body>
  <div id="entry"></div>
  <script type="text/javascript" src="/manifest.a2844a6ed8a5cd15d1a5.js"></script>
  <script type="text/javascript" src="/vendor.14bbb1b3abf7a67a5307.js"></script>
  <script type="text/javascript" src="/bundle.1ef0a652c0808bca139d.js">
  </script></body>
</html>

The error I get in the browser dev tools is Failed to Load Resource for each of my 3 JS bundle files and my 1 CSS file. If I remove the "/" in front of each of the filenames in the index.html file, those errors go away but then I get another error that it can't find a specific .png file in the build, which is also in the build folder.

I'm using webpack 2.6.1

If I can provide any further info please let me know - kinda new at asking questions here.

Solution

Change your webpack config to:

module.exports = {
  output: {
    publicPath: ''
  }
}