Webpack, new chunk is loading in with wrong path

Question

I am trying to chunk my app - attempting to follow webpacks guide on how-to (https://webpack.github.io/docs/code-splitting.html). So I have a seperate chunk set up for my app, I can see that webpack is generating 1.bundle.js in my build folder, however it is pasting it onto my index.html with an incorrect path, and in my console I see the fetch error for the 1.bundle.js file.

So my webpack config looks like so (im just using the webpack:dev for now):

 return {
    dev: {
        entry: {
            index: './client/app.jsx'
        },
        output: {
            path: path.join(__dirname, '..', '..', 'dist', 'client'),
            publicPath: "/dist/client/",
            filename: 'bundle.js'
        },
        module: {
            loaders: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }, {
                test: /\.json$/,
                loader: 'json-loader'
            }]
        },
        resolve: {
            extensions: ['', '.js', '.jsx']
        },
        resolveLoader: {
            fallback: [path.join(__dirname, 'node_modules')]
        },
        plugins: [
            new webpack.DefinePlugin({
                "process.env": {
                    "NODE_ENV": JSON.stringify("dev")
                }
            })
        ]
    },

and in my index.html I manually add <script src="bundle.js"></script> and that has been working great. It looks like when this builds now, webpack is applying its own script tag on my index like so

  <script type="text/javascript" charset="utf-8" async="" src="/dist/client/1.bundle.js"></script>

However this path is incorrect, it should just be src="1.bundle.js". I have tried tweaking the path and publicPath but nothing seems to work. Is there a way to have webpack add the correct path? Thanks!

Answer 1

You should change publicPath for this snippet:

publicPath: "/"

It will always serve your chunks from root path.

Answer 2

This is because you have given reference to publicPath. So it will try to load the script from this publicPath though the file is not present there.

Removing publicPath can resolve the error