问题描述

我正在尝试将webpack配置为使用打字稿和把手。 另外，我添加了webpack-dev-server，但它不起作用。它显示一切都在运行，但当我转到本地主机：6000时，我得到This site can't be reached。

这是我的目录树：

│   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？

推荐答案

回答此问题。端口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

这篇关于Webpack-dev-server似乎正在运行，但当我尝试访问端口时，收到无法访问此站点的消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！