serve does not work with multi-server

[Christian24]

Describe the bug

We're having issues updating to webpack 5 and webpack serve. Our project is divided into multiple webpack configurations. Say for example we have one configuration for a SPA /login/ , /portal/, our application for end users and /admin/ for our administrators. We do this, so that every SPA when hosted belongs into its own folder and we can easily make sure that critical code like in our /admin/ SPA is never served outside of intranet. Now to test locally, we use webpack-dev-server's multi project configuration. Every SPA is identifiable by an unique publicPath (e. g. /admin). This worked beautifully with webpack-dev-server, but with webpack 5 and webpack-cli this is no longer the case. We use multiple webpack configurations to test our

We used to use webpack-dev-server to start our development server directly, however as I understand that is no longer working with webpack 5.

What is the current behavior?

Webpack-cli outputs a an error message:

 Error: Unique ports must be specified for each devServer option inyour webpack configuration. Alternatively, run only 1 devServer config using the--config-name flag to specify your desired config.
    at Object.startDevServer [as default] 

To Reproduce

Steps to reproduce the behavior:
https://github.com/webpack/webpack-cli/blob/master/test/serve/basic/multi-dev-server.config.js without the explicit ports does show my use case perfectly.

Expected behavior

If publicPaths for configurations are unique, webpack serve should be able to serve them from the same port.

Screenshots

Please paste the results of webpack-cli info here, and mention other relevant information

Additional context

Maybe this was first introduced with #1649 A possible solution might be to change

webpack-cli/packages/serve/src/startDevServer.ts

Line 14 in ec3baa8

export default function startDevServer(compiler, devServerArgs): object[] {

to add an additional check for unique publicPaths if ports are not unique.

Thanks a lot,
Christian

[alexander-akait]

yep, because it is impossible, each compiler should have unique port, it is limitation, you can use multi entry syntax:

{
  entry: {
    pageOne: './src/page-one.js',
    pageTwo: './src/page-two.js'
  }
}

Even more - I don't think it is real can be solved, we don't know your files after compilation, and filename and publicPath and other can be functions so we even predict it.

[Christian24]

Well, multiple entries wouldn't work in our case, since that wouldn't allow us to specify the correct publicPath per entry, right?

I am a bit confused why this no longer works, since this worked just fine in webpack@4 and I am honestly a bit uncertain as to what our upgrade path can be.

[alexander-akait]

@Christian24 Can you provide example with webpack@4? I want to look at this, maybe be I am don't understand you correctly

[Christian24]

@alexander-akait sure. https://github.com/Christian24/webpack-dev-server-multi-config/tree/main This should give you a very basic example of what we are doing with webpack4 at the moment, but I am unable to recreate using webpack5. If you need additional details, please let me know.

[alexander-akait]

@Christian24 hm, works fine with webpack v5 and webpack-cli v4, my command is webpack serve --config ./webpack.config.js, when you set two devServe options, it means you need two dev servers, but in you case you don't need it

[alexander-akait]

Here some architecture limitations, because webpack-dev-server should be plugin, and you can apply it for all configurations and for the each configuration, it is on roadmap for webpack-dev-server v4, right now if you need to set port please use webpack serve --config ./path/to/webpack.config.js --port 8081

And here your case - you need apply webpack-dev-server on multi compiler level and set the port option. Right now you can set port using the devServer option for first compiler.

In future we will fix this limitation

[Christian24]

First of all thank you, @alexander-akait! You are very right that my example works fine with webpack5, I just checked. However, you were also correct that the multiple devServer configurations cause my issue. I always thought they would apply per configuration and not globally.

To everyone running into the same issue I have adapted my initial example into a

• broken: https://github.com/Christian24/webpack-dev-server-multi-config/tree/broken
• fixed: https://github.com/Christian24/webpack-dev-server-multi-config/tree/fixed

Is it just me or is the the multi-compiler feature lacking documentation? I would be happy to help if hands are needed with that, since it is an invaluable feature for me.

[Christian24]

I do not want to reinvent the wheel, but wouldn't a syntax like

{
devServer: ...,
configurations: [...]
}

be nicer since it would make make more explicit what part of the configuration is shared globally?

[alexander-akait]

@Christian24 Yep, I think it should be like this, but changing syntax in config files will be a big problem, I need think about it

[alexander-akait]

Let's keep open, I want to search right way for this or update docs with the limitation (official)