如何修改 webpack-dev- server的端口？
参考回答
要修改 webpack-dev-server 的端口，只需在 webpack.config.js 配置文件中的 devServer 选项里，添加或修改 port 配置项。例如，将端口设置为 8081：
module.exports = {
// 其他配置
devServer: {
contentBase: './dist', // 指定静态文件的目录
port: 8081, // 设置端口为 8081
hot: true, // 启用热模块替换
}
};
然后，运行以下命令启动服务器：
npx webpack serve
这样 webpack-dev-server 就会监听并使用你指定的 8081 端口了。
详细讲解与拓展
1. devServer.port 配置
devServer.port 配置项用于指定 webpack-dev-server 监听的端口号。默认情况下，webpack-dev-server 会监听端口 8080。但是在一些情况下，可能会遇到端口冲突，比如该端口已被其他服务占用，这时就需要更改端口。
你可以将 port 设置为任何可用的端口号。常见的端口号，如 3000、8000、8081 等，都可以作为开发服务器的端口。
2. 如何避免端口冲突？
有时修改端口并不是一劳永逸的解决方法，因为其他程序可能仍然会占用你选择的端口。为了解决这个问题，你可以在端口号后面加上一个逻辑，如使用 port 配置项和 port 的增量查找方法（通过某些插件或自定义配置）。
例如，使用 webpack-dev-server 的 --port 参数：
npx webpack serve --port 8081
这将会在命令行中直接指定端口，覆盖 webpack.config.js 中的设置。
3. 注意其他配置项
- host：你还可以通过
devServer.host配置项设置监听的主机地址，通常设置为'0.0.0.0'或'localhost'，这可以帮助你确保在局域网内也能访问到开发服务器。 -
publicPath：通过配置
publicPath，你可以控制访问编译输出的路径，通常用于生产环境的配置，但在开发过程中也有可能需要。
示例：配置多个端口和主机
如果你想要 webpack-dev-server 同时监听多个端口或主机，可能需要在 webpack.config.js 中做一些额外的调整，或者借助一些插件来实现。 但通常在开发过程中，修改 port 就足够满足需求。
总结
通过简单的配置修改 devServer.port，你可以轻松改变 webpack-dev-server 使用的端口号，这对于避免端口冲突和个性化开发环境非常有用。