webpack-dev-server port auto assign

Question

I want to set my webpack-dev-server's port auto assign. but it seems doesn't work。 what should I do?

webpack.config.js

const net = require('net');

module.exports = {
 devServer: {
      port: checkPort(5000).then((port) => getPort(port)),
      host:"localhost"
    }
}

function checkPort(port) {
  const server = net.createServer().listen(port, 'localhost');
  return new Promise(resolve => {
    server.on('listening', () => {
      server.close();
      resolve(port);
    });
    server.on('error', err => {
      console.log("err: ", err);
      resolve(getPort(port+1));
    })
  })
}

function getPort(port) {
  console.log("targetPort: ", port);
  return port;
}

if the port of 5000 is busy, then use 5001. but I get an error:

Invalid configuration object. webpack-dev-server has been initialised using a configuration object that does not match the API schema.

I always can't get to right port.

Answer 1

I've resolved the question in this way.

you can see the document of webpack's configuration type in here

const net = require('net');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./configs/webpack.common');

let PORT = 5000;
function checkPort(port) {
  PORT = port;
  const server = net.createServer().listen(port, 'localhost');
  server.on('listening', function() {
    server.close();
  });
  server.on('error', err => {
    if (err.code === 'EADDRINUSE') {
      checkPort(port + 1);
    }
  });
}
checkPort(PORT);

module.exports = env => {
  const envConfig = require(`./configs/webpack.${env.env}.js`);
  const isDevEnv = env.env === 'dev';
  let portConfig = {};
  return new Promise(resolve => {
    setTimeout(() => {
      if (isDevEnv) {
        portConfig.devServer = {
          port: PORT
        };
      }
      resolve(webpackMerge.smart(commonConfig, envConfig, portConfig));
    }, 100);
  });
};