Webpack Serve not inserting JS into index.html

Question

Good day,

I set up Webpack to create an optimized build of my React application to /dist/ with webpack --mode production --config webpack.config.production.js , which automatically inserts the correct initial script into the head of index.html (webpack.config.production.js, index.html). This works using my Rust back-end to serve the production-built files. However, my script that utilizes webpack serve --mode development --config webpack.config.js to enable hot-reloading does not insert the named script into the HTML file, and thus fails to load (webpack.config.js).

I have spent the past hour and a half trying everything I could find to fix this to no avail, and I would greatly appreciate any assistance. Further, if there is a way to utilize my Rust backend with hot-reloading that would be a superior solution :).

Matt Carlotta · Accepted Answer · 2021-06-04 21:52:17Z

1

@Robert was on the right track, the problem is that you have two different publicPaths in your webpack.config.js:

For example, your output's publicPath is /:

...
output: {
  filename: "static/[name].[fullhash].js",
  path: path.resolve(__dirname, "dist"),
  publicPath: "/",
},

while your devServer's output is http://localhost:3000/dist/:

...
devServer: {
  contentBase: path.join(__dirname, "public/"),
  port: 3000,
  publicPath: "http://localhost:3000/dist/",
  open: true,
},
...

Instead, they should be the same path -- in this case, they should be / (alternatively, you can remove the publicPath property from devServer and it'll work as well):

devServer: {
  contentBase: path.join(__dirname, "public/"),
  port: 3000,
  // publicPath: "/",
  open: true,
},

answered Jun 4, 2021 at 21:52

Matt Carlotta

19.8k5 gold badges42 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Webpack Serve not inserting JS into index.html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related