使用 webpack 开发服务器将 localhost 重命名为自定义域？

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

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

启动您的 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