使用 webpack 开发服务器将本地主机重命名为自定义域？

Question

我正在尝试重命名我localhost在开发中使用的名称。

我已经更新了我的C:\Windows\System32\drivers\etc\hosts文件并添加了这一行（以管理员身份运行）：

# copyright (c) 1993-2009 microsoft corp.
#
# this is a sample hosts file used by microsoft tcp/ip for windows.
#
# this file contains the mappings of ip addresses to host names. each
# entry should be kept on an individual line. the ip address should
# be placed in the first column followed by the corresponding host name.
# the ip address and the host name should be separated by at least one
# space.
#
# additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# for example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within dns itself.
#   127.0.0.1       localhost
#   ::1             localhost

127.0.0.1        my-dev-environment.com         // <===== ADDED THIS LINE
127.0.0.1:8080   my-dev-environment.com         // <===== I ALSO TRIED THIS

但我不断收到此错误：

This site can’t be reached
"my-dev-environment.com" refused to connect

我正在使用webpack-dev-server开发，这是我当前的配置：

webpack.config.js

devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: {
      index: '/app.html'
    },
    index: 'app.html'
  },

题

难道我做错了什么？为什么它不起作用？

---

更新（已解决）：

遵循以下答案中的@Joel 建议，我已将其添加到我的 webpack.config.js

devServer: {
  public: 'my-dev-environment.com',
  port: 80,                       
}

这是在我的hosts文件中：

127.0.0.1        my-dev-environment.com

现在我可以访问它 my-dev-environment.com

Answer 1

在主机中：127.0.0.1 my-dev-environment.com

通过运行刷新您的 DNS 缓存ipconfig /flushdns。

启动webpack-dev-server 时：

添加标志--host 0.0.0.0和--public my-dev-environment.com:PORT

:PORT通过浏览器访问时可以省略吗？

由于http://默认为:80. 让您的应用程序在端口上运行:80。除非你有一个 apache 实例或类似的东西，否则在:8080.

如果您有https://协议，请:443改为在端口上运行您的应用程序。

Answer 2

在 Webpack 5 中，devserver配置从更改public为host：

devServer: {
  host: 'my-dev-environment.com',
  port: 8080,
}

Webpack 文档：https ://webpack.js.org/configuration/dev-server/#devserverhost