webpack-dev-server动态端口

时间:2017-02-05 17:39:29

标签: javascript webpack webpack-dev-server

是否可以为webpack-dev-server找到未使用的端口? 我当前的配置看起来像:

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

2 个答案:

答案 0 :(得分:4)

省略port时,webpack-dev-server使用以8000开头的第一个可用端口,请参阅the PR。需要webpack-dev-server⩾2.2。

对于早期版本,the port 0 trick可以正常工作。有关详细信息,请参阅here

答案 1 :(得分:0)

如果不选择省略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,因为我需要它在我的public配置中设置devServer属性:

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}`,
},