是公司比较老的项目，webpack使用的v3版本，为了实现localhost，127.0.0.1和本地ip可以同时被访问，webpack我们一般将devServer中的host设置为0.0.0.0，这样本机所有ipv4地址都可以访问。比如我们想把本地运行的前端项目分享给公司的后端，product，test...预览效果，如果host直接设置为localhost，运行后打开的地址http://localhost：8080，直接分享给他人打不开。为了解决上面的局域网共享问题，我们需要在0.0.0.0运行前端服务，然后将本地ipv4地址如：http://192.168.2.228:8080共享给其他人，用户在同一个局域网可以直接访问。浏览自动打开http://0.0.0.0:8080，但是我们设置之后，默认自动打开的浏览器地址和终端输出的运行地址也变成了：http://0.0.0.0:8080，更多terrible这个地址在windows上被认为是无效地址，无法访问，但是在mac上可以直接访问。查看webpack配置，注意只保留相关的主要代码：//webpack.dev.conf.js'usestrict'constutils=require('./utils')constwebpack=require('webpack')constconfig=require('../config')constmerge=require('webpack-merge')constbaseWebpackConfig=require('./webpack.base.conf')constFriendlyErrorsPlugin=require('friendly-errors-webpack-plugin')constportfinder=require('portfinder')constHOST=process.env.HOSTconstPORT=process.env.PORT&&Number(process.env.PORT)constdevWebpackConfig=merge(baseWebpackConfig,{devServer:{host:HOST||配置。dev.host,port:PORT||config.dev.port,打开:config.dev.open,}})module.exports=newPromise((resolve,reject)=>{portfinder.basePort=process.env.PORT||config.dev.portportfinder.getPort((err,port)=>{if(err){reject(err)}else{//发布新端口，e2e测试必需process.env.PORT=port//添加端口到devServer配置devWebpackConfig.devServer.port=port//添加FriendlyErrorsPlugindevWebpackConfig.plugins.push(newFriendlyErrorsPlugin({compilationSuccessInfo:{messages:[`你的应用程序在这里运行：http://${devWebpackConfig.devServer.host}:${port}`],},onErrors:config.dev.notifyOnErrors?utils.createNotifierCallback():undefined}))resolve(devWebpackConfig)}})})当浏览器设置为自动打开时，打开的地址会直接被调用ushost设置好了，所以会打开http://0.0.0.0:8080。首先，我们需要将服务运行地址与我们浏览器打开的地址分开设置。我们需要固定服务运行地址为0.0.0.0，但是在浏览器中打开地址我们不需要这个。第一点，我们可以通过脚本中的命令直接设置--host参数指定0.0.0.0。在命令行中直接传递的参数具有最高的优先级。修改package.json:{"name":"front-end","version":"1.0.0","description":"client","author":"cafehaus","private":true,"scripts":{"predev":"yarn","dev":"webpack-dev-server--inline--progress--host0.0.0.0--configbuild/webpack.dev.conf.js","start":"npmrundev","build":"nodebuild/build.js"},}devServer.public配置浏览器地址然后可以通过devServer.public配置来设置浏览器打开的地址，但是只有v3和v4版本的webpack才能使用，而且这个必须要设置完整的host:port，但是这里不能写固定的端口，因为如果我们设置的端口被占用，webpack-dev-server在实际运行的时候会帮我们找到一个没有被系统占用的端口。我们可以使用portfinder-sync找到系统的可用端口，然后将它们设置为公共。大致代码思路如下：constconfig=require('../config')constportFinderSync=require('portfinder-sync')constport=portFinderSync.getPort(config.dev.port)constdevServer={host:'localhost',open:true,port,public:`localhost:${port}`,}，终极解决方案要获取实际使用的端口，webpack其实还有portfinder这个包。我们可以直接更改webpack.dev.conf.js中的最后一个配置，直接在portfinder中设置devWebpackConfig.devServer.public。我们也可以使用address获取本地ipv4地址，使用chalk美化输出：'usestrict'constutils=require('./utils')constwebpack=require('webpack')constconfig=require('../config')constmerge=require('webpack-merge')constbaseWebpackConfig=require('./webpack.base.conf')constFriendlyErrorsPlugin=require('friendly-errors-webpack-plugin')constportfinder=require('portfinder')constaddress=require('address')constchalk=require('chalk')constHOST=process.env.HOST||配置.dev.host||'0.0.0.0'//服务地址，设置为0.0.0.0允许本机所有ipv4地址访问constLOCAL_HOST=config.dev.host||'localhost'//本地访问地址constLOCAL_IP=address.ip()//本地ipconstPORT=(process.env.PORT&&Number(process.env.PORT))||配置.dev.port||8080//端口constdevWebpackConfig=merge(baseWebpackConfig,{devServer:{host:HOST,port:PORT,open:config.dev.autoOpenBrowser,}})module.exports=newPromise((resolve,reject)=>{portfinder.basePort=PORTportfinder.getPort((err,port)=>{if(err){reject(err)}else{//发布新端口，e2e测试需要process.env.PORT=port//添加端口到devServer配置devWebpackConfig.devServer.port=portdevWebpackConfig.devServer.public=`${LOCAL_HOST}:${port}`,//添加FriendlyErrorsPlugindevWebpackConfig.plugins.push(newFriendlyErrorsPlugin({compilationSuccessInfo:{messages:[`App运行于：`,`-本地：`+chalk.cyan(`http://${LOCAL_HOST}:${port}`)`-网络:`+chalk.cyan(`http://${LOCAL_IP}:${port}`)],},onErrors:config.dev.notifyOnErrors?utils.createNotifierCallback():undefined}))resolve(devWebpackConfig)}})})webpack-dev-serverdevServer.host配置访问地址的几个相关配置，host：host，server，v3和v4版本默认为localhost，v5版本默认为它是0.0.0.0devServer.port。端口devServer.public可用于设置默认打开浏览器的地址。请注意，此配置仅适用于v3和v4版本。这个配置在webpackv5版本中不再可用。相关文档portfinder，获取端口portfinder-sync，基于portfinder的同步版本friendly-errors-webpack-pluginwebpack-dev-serveropenandhostopenswrongURL
