Webpack-dev-server似乎在运行，但当我尝试访问端口时，出现了“无法访问此网站”的错误提示。

Question

我正在尝试配置webpack与typescript和handlebars一起使用。我还添加了webpack-dev-server，但它无法正常工作。它显示所有内容都在运行，但当我访问localhost:6000时，会出现“此网站无法访问”的错误提示。

这是我的目录树：

│   package.json
│   tsconfig.json
│   webpack.config.js 
│
├───dist 
│       bundle.js
│       bundle.js.map
│       index.html
│
└───src
        index.handlebars
        index.ts
        templates.d.ts

这里是webpack.config.js文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    hot: true,
    host: '0.0.0.0',
    port: 6000,
    open: true
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  resolve: {
    extensions: ['.ts', '.js' ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        handlebarsLoader: {}
      }
    }),
    new HtmlWebpackPlugin({
      title: 'My hometask',
      template: './src/index.handlebars'
    })
  ],
  module: {
    rules: [
      { 
        test: /\.js/,
        loader: 'babel',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.handlebars$/,
        loader: "handlebars-loader"
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ]
  }
};

这有什么问题吗？为什么我不能使用dev-server？

- Vitali Skripka

---

这里只是尝试一下，但你是否尝试将主机更改为您实际的本地IP地址？我想知道它是否有所不同。 - JordyvD

另外，当您启动终端时，它会显示什么？ - JordyvD

Answer 1

回答这个问题。6000端口是受保护的端口，用于其他事情，因此不能用于本地主机。

以下是Chrome上的受限端口，被认为是不安全的，因此无法用于您的用途。

1,       // tcpmux
7,       // echo
9,       // discard
11,      // systat
13,      // daytime
15,      // netstat
17,      // qotd
19,      // chargen
20,      // ftp data
21,      // ftp access
22,      // ssh
23,      // telnet
25,      // smtp
37,      // time
42,      // name
43,      // nicname
53,      // domain
77,      // priv-rjs
79,      // finger
87,      // ttylink
95,      // supdup
101,     // hostriame
102,     // iso-tsap
103,     // gppitnp
104,     // acr-nema
109,     // pop2
110,     // pop3
111,     // sunrpc
113,     // auth
115,     // sftp
117,     // uucp-path
119,     // nntp
123,     // NTP
135,     // loc-srv /epmap
139,     // netbios
143,     // imap2
179,     // BGP
389,     // ldap
427,     // SLP (Also used by Apple Filing Protocol)
465,     // smtp+ssl
512,     // print / exec
513,     // login
514,     // shell
515,     // printer
526,     // tempo
530,     // courier
531,     // chat
532,     // netnews
540,     // uucp
548,     // AFP (Apple Filing Protocol)
556,     // remotefs
563,     // nntp+ssl
587,     // stmp?
601,     // ??
636,     // ldap+ssl
993,     // ldap+ssl
995,     // pop3+ssl
2049,    // nfs
3659,    // apple-sasl / PasswordServer
4045,    // lockd
6000,    // X11
6665,    // Alternate IRC [Apple addition]
6666,    // Alternate IRC [Apple addition]
6667,    // Standard IRC [Apple addition]
6668,    // Alternate IRC [Apple addition]
6669,    // Alternate IRC [Apple addition]
6697,    // IRC + TLS

- Scott Hooker

Answer 2

我把端口改成了4000，然后它开始工作了。
我也不知道为什么会这样 ;)

- Vitali Skripka