webpack-dev-server path publicpath configuration when index.html is in different folders

Question

I have tried to solve this using path, publicpath, contentBased but no luck. (only working if bundle.js and index.html are in same folder)

Env: Webpack 5 + webpack-dev-server + react.

Issue: unable to load application properly in wp dev server, either it show contents folders or not hot reload.
This working fine if generate html & bundle in same folder, but for some reason, I have to keep them in different folders.

Folder structure

dist\bundle.js
dist\style.css
public\index.html   (generated by HTML-webpack-plugin)
public\....         (other files)

webpack config

output: {
   path: path.resolve(..., 'dist')     //also tried to generate dist inside public
   filename: bundle.js
   //publicPath: path.resolve(..., 'dist') //etc
}
devServer: {
  contentBase: path.resolve(..., 'public')
}

I have tried multiple combination with no luck, I want to keep single version of html file and avoid modify src manually for dev builds.

Could someone please guide with right configuration.

Domi · Accepted Answer · 2021-06-11 18:02:42Z

0

contentBase accepts an array, like so:

module.exports = {
  // ...
  devServer: {
    // ...
    contentBase: [
      path.join(RootPath, 'public'),
      path.join(RootPath, 'dist')
    ]
    // ...
  }
  // ...
};

One important thing to note is that output.publicPath also plays a crucial role here.

By default (given your target is web (default) or webWorker), output.publicPath is set to 'auto', which means that it determines the url to fetch chunks based on how you require bundle.js. That'll work fine in most cases.

However, if your bundle.js itself is retrieved using an obscure relative path (e.g. the OP retrieves it from ../dist/bundle.js), then 'auto' will not work, and you probably want to set output.publicPath manually, using an absolute path (as the OP also ended up doing).

edited Jun 11, 2021 at 18:02

answered Jun 10, 2021 at 20:06

Domi

24.9k19 gold badges104 silver badges133 bronze badges

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

5 Comments

user1360135 Over a year ago

Thank for quick response, great to know contentBase can watch multiple directory simultaneously. it should work, but somehow dist content update still not reflecting, i am only seeing initial index.html with just loading bar all the time, and it not getting change (replace by react code) when bundle completes. I am proving public, dist and also tried to append './' at end. I add './' because in log it showing 3 files, which give me impression serving bundle from root. asset bundle.js asset style.css asset ..\public\index.html entry point style.css bundle.js

user1360135 Over a year ago

Ahh. it getting http 404 on bundle files. injected script line src=../dist/bundle.js while bundle is available at root of server localhose:port/bundle.js something to do with publicpath

user1360135 Over a year ago

publicPath: '/dist/' in addition to @Domi solution fix it completely

Domi Over a year ago

@user1360135 I updated my answer to explain the phenomenon.

user1360135 Over a year ago

Thanks for help. I used publicPath of devServer instead of output.publicPath to make sure no impact on actual build.

Collectives™ on Stack Overflow

webpack-dev-server path publicpath configuration when index.html is in different folders

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related