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" } }); 

三，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) } }) }) 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hd-yjs/10980.html