CODEWITHSUNDEEP
javascriptwebpack
ajmajmajma
ajmajmajma

Reputation: 14216

Webpack, new chunk is loading in with wrong path

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!

Upvotes: 17

Views: 19796

Answers (3)

Kannan J
Kannan J

Reputation: 508

Even though it is answered and accepted, I am providing additional helpful info for others with similar problems.

There are two different purposes for which the 2 parameters are used.

  1. Output:path : The directory the bundle files mentioned in entry section are saved into. For example, the bundle.js for the 'entry' entry you had mentioned. In this case, it will be saved in webconfigfolder+"../../dist/client" folder.
  2. Output: publicPath: The directory prefix that is added to refer to a module when accessed from browser. 0.bundle.js is an unnamed chunk created by code splitting. It will be placed in the output:path mentioned above but will be referred in your html using the public path.

So,if your files as in this case is stored in /dist/client folder, but the index.htm is served in /dist/client, you should give the public path as ./. If htm is served from /dist, the public path should be given as ./client/.

The public path is useful for chunks created for async loading which are called from browser dynamically.

Upvotes: 15

Everettss
Everettss

Reputation: 16059

You should change publicPath for this snippet:

publicPath: "/"

It will always serve your chunks from root path.

Upvotes: 28

brk
brk

Reputation: 50346

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

Upvotes: 5

Related Questions