webpack-dev-server启动失败(vents.js:183)

Question

我在最近安装webpack-dev-server后总是启动失败，尝试了各种办法，都不管用。

本地环境

• macOS 10.12.6
• node v8.11.4
• npm v5.6.0
• 我是用cnpm安装的

错误提示

vents.js:183
      throw er; // Unhandled 'error' event
      ^

Error: getaddrinfo ENOTFOUND localhost
    at errnoException (dns.js:50:10)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:92:26)

依赖

{
  "name": "webpack-guides",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "watch": "webpack --watch",
    "server": "node server.js",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "express": "^4.16.3",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 9000
  },
  plugins: [
    // new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      title: 'Output Mangement'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
};

我尝试了

• 删除/node-modules重新安装
• 安装依赖ws（收到的资料）
• 关闭本地8080与80接口上的服务（搜到资料大部分说端口冲突）
• 将端口设置为其他的9000
• 安装其他版本的webpack-dev-server
• 我使用webpack-dev-middleware与express配合的服务器可以使用

以上都不能解决

Answer 1

问题解决

最终还是/node_modules依赖包的问题，归根究底，是网络的问题。

我之前是使用手机分享的网络（中国移动）安装依赖的。今天使用宽带网络（长城宽带）安装依赖，一次成功。

排除cnpm的问题，宽带使用npm与cnpm都试过，一次成功。

总结一下

说的直白点debug就是一个不断排除与不断定位寻找原因的过程

遇到这种神奇的问题一般经过几步

1. 定位BUG

   1. 浏览器报错和开发工具报错
   2. 通过注释的办法找到"有可能引起错误的代码"

2. 寻找思路

   1. 没有思路搜索引擎寻找思路

3. 选择并解决问题

   1. （在不破坏当前环境的情况下）不断的尝试各种可能的办法
   2. 如果仍不能解决，尝试一些不认为可行的办法(例如重开一个项目)。
   3. 如果不着急，把代码放着过几天再看。或许自己就好了?。