webpack5配置portfinder支持端口多开

一，概述

有时本地运行多个项目时，80端口已经被使用，这时候npm run dev，如果没有检测可用端口的功能，就会报错：”端口已被占用"。为了解决这一个问题，需要在运行项目之前，扫描端口，取得一个可用的端口，来进行项目的运行。

二，portfinder使用前

在没有引入之前，webpack的配置时大概这样的。

const path = require("path");
const { merge } = require("webpack-merge");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BaseWebpackConfig = require("./webpack.base.conf");
module.exports = merge(BaseWebpackConfig, {
  mode: "development",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "./js/[name].[chunkhash].js",
    clean: true // 打包时先清除上次打包文件
  },
  devServer: {
    hot: true, //模块的热替换
    open: true, // 编译结束后自动打开浏览器
    port: 8080, // 设置本地端口号
    host: "localhost", //设置本地url
    // 设置代理，用来解决本地开发跨域问题
    proxy: {
      "/api": {
        secure: false,
        changeOrigin: true,
        target:
          "https://www.fastmock.site/mock/88bbb3bb8d6ea3dc8f09431a61ce2e50/mymock_test",
        pathRewrite: { "^/api": "" }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html", //用来做模板的html的文件路径
      filename: "index.html", //生成的html的名字
      title: "webpack5的项目配置", //这个就对应上文的title
      inject: "body" //打包出来的那个js文件，放置在生成的body标签内
    }),
    new MiniCssExtractPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    runtimeChunk: "single"
  }
});

注意到这里用的是module.exports，将配置好的对象导出给webpack使用。
接下来引入portfinder。

三，portfinder的使用

1，安装

npm i portfinder -D

2，引入

const portfinder = require('portfinder');//自动查找可用端口

3，修改配置

主要修改的地方是这里：

...、、其他引入
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
const portfinder = require('portfinder');//自动查找可用端口
const devWebpackConfig = merge(BaseWebpackConfig, {
 ...//旧有配置
});
//改成这里来module.exports了，可以看到最后又把整个webpack配置resolve出去了。
module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = devWebpackConfig.devServer.port;
  portfinder.getPort((err, port) => {
      if (err) {
          reject(err)
      } else {
          // publish the new Port, necessary for e2e tests
          process.env.PORT = port
          // add port to devServer config,主要是这一步更新可用的端口
          devWebpackConfig.devServer.port = port

          // Add FriendlyErrorsPlugin
          devWebpackConfig.plugins.push(
              new FriendlyErrorsWebpackPlugin({
                  compilationSuccessInfo: {
                      messages: [
                          `Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`
                      ],
                      notes: []
                  },
                  clearConsole: true
              })
          )

          resolve(devWebpackConfig)
      }
  })
})

修改后完整的配置：

const path = require("path");
const { merge } = require("webpack-merge");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BaseWebpackConfig = require("./webpack.base.conf");
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
const portfinder = require('portfinder');//自动查找可用端口
const devWebpackConfig = merge(BaseWebpackConfig, {
  mode: "development",
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "./js/[name].[chunkhash].js",
    clean: true // 打包时先清除上次打包文件
  },
  devServer: {
    hot: true, //模块的热替换
    open: true, // 编译结束后自动打开浏览器
    port: 8080, // 设置本地端口号
    host: "localhost", //设置本地url
    // 设置代理，用来解决本地开发跨域问题
    proxy: {
      "/api": {
        secure: false,
        changeOrigin: true,
        target:
          "https://www.fastmock.site/mock/88bbb3bb8d6ea3dc8f09431a61ce2e50/mymock_test",
        pathRewrite: { "^/api": "" }
      }
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html", //用来做模板的html的文件路径
      filename: "index.html", //生成的html的名字
      title: "webpack5的项目配置", //这个就对应上文的title
      inject: "body" //打包出来的那个js文件，放置在生成的body标签内
    }),
    new MiniCssExtractPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    runtimeChunk: "single"
  }
});

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = devWebpackConfig.devServer.port;
  portfinder.getPort((err, port) => {
      if (err) {
          reject(err)
      } else {
          // publish the new Port, necessary for e2e tests
          process.env.PORT = port
          // add port to devServer config
          devWebpackConfig.devServer.port = port

          // Add FriendlyErrorsPlugin
          devWebpackConfig.plugins.push(
              new FriendlyErrorsWebpackPlugin({
                  compilationSuccessInfo: {
                      messages: [
                          `Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`
                      ],
                      notes: []
                  },
                  clearConsole: true
              })
          )

          resolve(devWebpackConfig)
      }
  })
})