webpack配置自增端口

2022年06月27日Web前端0

由于偶尔需要给服务器同事启动本地调试环境，这时候用指定的端口就很容易存在冲突了，每次去改文件略微有些麻烦。于是想整下，可以自动判断当前端口是否冲突，并依次递增，直到找到不冲突的端口，并启动server。

portfinder

portfinder是个不错的查找不冲突端口的npm包，地址：portfinder，可以指定从哪个端口开始查起，直到空闲的端口。

有了这个插件，接下来就是改造下webpack.development.js了。

const portfinder = require("portfinder");
const config = { /* 这里是之前从webpack.development.js export 出的配置 */};

portfinder.basePort = config.devServer.port; // 指定从哪个端口开始查起

module.exports = new Promise((resolve, reject) => {
  portfinder.getPortPromise().then((port) => { // port 为遍历后的空闲端口
    config.devServer.port = port;
    resolve(config);
  }).catch((err) => {
    reject(config);
  });
});

其他不用修改，就可以启动本地server了。

Webpack

目录