webpack-dev-server是一个前端开发服务器，该服务器主要用于开发环境下，热重载以及实时更新应用程序。在使用webpack-dev-server时，经常需要设置访问端口以满足您的开发需求。本文将会详细介绍webpack-dev-server如何设置访问端口，并提供示例代码以供参考。
基础配置
首先，我们需要了解webpack-dev-server的基础配置。在webpack的配置文件中，您可以配置webpack-dev-server的选项。以下是一些基础选项：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
-- --------
----- ------------
-- --------
----- -----
-- -------
----- -----
-- -----
---- ----
-
--在上面的示例代码中，我们可以看到几个选项：
host选项：指定要运行的主机。默认值为localhost。port选项：指定要使用的端口。默认值为8080。open选项：指定是否在启动webpack-dev-server时自动打开浏览器。默认为false。hot选项：指定是否启用热重载。默认为false。
设置端口
现在，我们来看看如何设置webpack-dev-server的访问端口。我们可以通过在devServer选项中设置port属性来完成。例如：
module.exports = {
// ...
devServer: {
// 使用8888端口
port: 8888
}
};在上面的示例代码中，我们设置了webpack-dev-server的访问端口为8888。只要我们重启webpack-dev-server，我们就可以在浏览器中通过http://localhost:8888/来访问我们的应用程序。
多端口设置
当然，您也可以为一个webpack-dev-server设置多个端口。例如，您可能希望使用webpack-dev-server在localhost:8080上提供应用程序，与此同时在localhost:3000上提供API接口。下面的示例代码就可以实现此功能：
-- -------------------- ---- -------
-------------- - -
-- ---
---------- -
-- --------
----- -----
-- -------
------ -
-- ---------------
------- -----------------------
-
-
--在上面的示例代码中，我们设置了port属性为8080，并设置了代理服务器为http://localhost:3000。这意味着当我们向webpack-dev-server发送请求时，该服务器会将所有/api请求转发到代理服务器的http://localhost:3000端口。
总结
在本文中，我们详细介绍了webpack-dev-server如何设置访问端口。我们了解了它的基础配置选项，并提供了示例代码以供进一步学习。希望这篇文章能够帮助您更好地使用webpack-dev-server来开发前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a0e3bcadd4f0e0ff913b85