webpack-dev-server动态端口

Question

是否可以为webpack-dev-server找到未使用的端口？ 我当前的配置确实如下所示：

devServer: {
    historyApiFallback: true,
    inline: true,
    host: '0.0.0.0',
    port: 3000,
    contentBase: helpers.root('public'),
    stats: 'minimal'
}

Answer 1

当省略port ， webpack-dev-server使用从8000开始的第一个可用端口，请参阅PR 。 需要webpack-dev-server server⩾2.2。

对于早期版本， 端口0技巧可能起作用。 有关详细信息，请参见此处 。

Answer 2

如果不选择忽略port则可以使用portfinder-sync自动为您选择下一个可用端口：

const portFinderSync = require('portfinder-sync')

devServer: {
    historyApiFallback: true,
    inline: true,
    host: '0.0.0.0',
    port: portFinderSync.getPort(3000),
    contentBase: helpers.root('public'),
    stats: 'minimal'
}

就我而言，我无法省略port因为我需要它在我的devServer配置中设置public属性：

const portFinderSync = require('portfinder-sync')
const port = portFinderSync.getPort(8080)

devServer: {
  contentBase: path.join(__dirname, 'dist'),
  host: '0.0.0.0',
  open: true,
  port: port,
  public: `${ipaddress}:${port}`,
},