Rename localhost to custom domain using webpack dev server?

Question

I'm trying to rename my localhost that I use on development.

I have updated my C:\Windows\System32\drivers\etc\hosts file and added this line (ran as Administrator):

# 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

But I keep getting this error:

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

I'm using webpack-dev-server to develop, and here is my current config for it:

webpack.config.js

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

QUESTION

Am I doing something wrong? Why isn't it working?

---

UPDATE (SOLVED):

Following @Joel recommendations from the answer below, I've added this to my webpack.config.js

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

And this is on my hosts file:

127.0.0.1        my-dev-environment.com

Now I can access it on my-dev-environment.com

Answer 1

In hosts: 127.0.0.1 my-dev-environment.com

Flush your DNS-Cache by running ipconfig /flushdns.

When launching your webpack-dev-server:

add the flags --host 0.0.0.0 and --public my-dev-environment.com:PORT

Is it possible to omit the :PORT when accessing it through the browser?

Since http:// defaults to :80. Make your application run on port :80 instead. Unless you have an apache instance or something similar, then run it on :8080.

If you have an https:// protocol, make your application run on port :443 instead.