ajmajmajma ajmajmajma - 3 months ago 18
Javascript Question

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!

Answer

You should change publicPath for this snippet:

publicPath: "/"

It will always serve your chunks from root path.