serve does not work with multi-server

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

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.

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.

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

@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.

@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

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

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

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.

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?

@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

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

Sure, maybe here: https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations? I wouldn't know if I would find it there though. I think the whole topic might need more documentation or is there more? Would it be a good idea to open an issue at https://github.com/webpack/webpack.js.org?

I will open an issue in docs repo don't worry, I need time to think how we can make it better

@Christian24 @alexander-akait, thanks for your work on this issue!!!!

This same problem just came up for me this week.

@Christian24's detailed notes helped me get our local dev up and running again! 🙏

I think we will do the same webpack/webpack#12671, but for dev server

I get this same problem now when I try to upgrade webpack from v4 to v5.

As @Christian24's detail, I have also use the multiple configs: https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations, and works well on webpack@4, but get error on v5:

[webpack-cli] Error: Unique ports must be specified for each devServer option in your webpack configuration. Alternatively, run only 1 devServer config using the --config-name flag to specify your desired config.
    at Object.startDevServer [as default] (node_modules/@webpack-cli/serve/lib/startDevServer.js:94:23)
    at Command.<anonymous> (node_modules/@webpack-cli/serve/lib/index.js:93:57)
    at async Promise.all (index 1)

Thanks all of you!

@1950195 that is because you have multiple devServer options. One will work across all configurations

@1950195 that is because you have multiple devServer options. One will work across all configurations

Yes, agree. I’m trying to separate the different projects from one webpack config file now. Then may easy to merge some in one...

And also we have performance problems on running the build script, about 50 configs in one config. So it’s the time to separate them.😂

Thanks for your works, this is my script to remove the same devServers configs.

const glob = require('glob');
const util = require('util');

const configs = glob.sync('./plugins/*/webpack.config*.js').map(file => require(file));

if (!process.argv.includes('--config-name')) {
  // Remove same devServers to avoid
  // "Error: Unique ports must be specified for each devServer option in your webpack configuration."
  // @link https://github.com/webpack/webpack-cli/issues/2408
  const devServers = [];
  configs.forEach(config => {
    devServers.forEach(devServer => {
      if (util.isDeepStrictEqual(config.devServer, devServer)) {
        delete config.devServer;
      }
    });
    if (config.devServer) {
      devServers.push(config.devServer);
    }
  });
}

module.exports = configs;

We need:

add supports for multiple dev server
supports devServer: false to disable dev server

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

bump

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

@webpack/cli-team I think we can implement it in better way - --no-dev-server [config-name] (only for webpack serve, so should be implement there), should solve most of problems