使用 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

在 hosts 中：127.0.0.1 my-dev-environment.com

通过运行ning 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

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

Rename localhost to custom domain using webpack dev server?

dns

localhost

hosts

webpack

webpack-dev-server