webpack-dev-server 如何设置访问端口？

webpack-dev-server是一个前端开发服务器，该服务器主要用于开发环境下，热重载以及实时更新应用程序。在使用webpack-dev-server时，经常需要设置访问端口以满足您的开发需求。本文将会详细介绍webpack-dev-server如何设置访问端口，并提供示例代码以供参考。

基础配置

首先，我们需要了解webpack-dev-server的基础配置。在webpack的配置文件中，您可以配置webpack-dev-server的选项。以下是一些基础选项：

module.exports = {
  // ...
  devServer: {
    // 指定要运行的主机
    host: 'localhost',
    // 指定要使用的端口
    port: 8080,
    // 自动打开浏览器
    open: true,
    // 启用热重载
    hot: true
  }
};

在上面的示例代码中，我们可以看到几个选项：

• 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接口。下面的示例代码就可以实现此功能：

module.exports = {
  // ...
  devServer: {
    // 使用8080端口
    port: 8080,
    // 指定代理服务器
    proxy: {
      // 将API请求代理到3000端口
      '/api': 'http://localhost:3000'
    }
  }
};

在上面的示例代码中，我们设置了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