node-portfinder自动检测当前端口是否被占用,如占用默认会返回最新端口。portfinder默认为8000端口,并扫描是否被占用,如占用递增+1为8001、8002、8003.。。。直到达到最大端口号(65535)。所以webpack-dev-server结合node-portfinder会启用多个端口。
portfinder安装
npm i --save-dev portfinder
webpack-dev-server结合portfinder使用
const common = require('./webpack.common.js');
const portfinder = require('portfinder');
const devConfig = Object.assign(common, {
mode:'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
port:process.env.PORT || 8085,
disableHostCheck: true,
useLocalIp: true
}
});
module.exports = new Promise((resolve, reject) => {
//查找端口号
portfinder.getPort((err, port) => {
if(err){
reject(err);
return;
}
//端口被占用时就重新设置evn和devServer的端口
devConfig.devServer.port = process.env.PORT = port;
resolve(devConfig);
});
});
vue-cli脚手架中webpack配置也使用了node-portfinder来检查端口一旦被占用,会自动启用新端口。