# webpack - 常见错误

# webpack-dev-server

# 1. 错误提示 invalid host header

问题原因 webpack-dev-server 增加了对 host header 正确性的检测，以屏蔽未经授权的访问。开发者需要在执行 webpack-dev-server 命令时手动添加 –public 选项，取值为授权的 host，否则就会出现这个问题，也就是“Invalid Host Header”。 解决方案

1. 执行 webpack-dev-server 命令时手动添加 –public 选项，取值为授权的 host，这是官方建议的做法，目的是为了安全。
2. 设置 webpack-dev-server 的配置项 disableHostCheck为 true 以禁用这一检测，如果开发者使用了代理，或在开发环境中不 care 这些安全问题，该设置可以直接斩草除根。

{
  "devServer": {
    "disableHostCheck": true
  }
}

host 为 localhost 或 127.0.0.1 时不会受阻。 只有使用 webpack-dev-server 或webpack-dev-middleware 时会进行该项检测，webpack 和 打包后的代码不受此影响。

注意： 找了半天配置都没法发现原因的话，可能是运行了多个服务，端口被占用了。。把前一个服务关掉就可以了

# 2. 不能使用 ip 访问

问题描述 webpack-dev-server 服务启动后，我们可以直接在 http://localhost:端口 进行访问，但是如果内网内其他客户端如果想要访问的话，换成 http://ip:端口 却无法访问。 解决方案

1. 在执行 webpack-dev-server 命令的时候加上参数 --host 0,0,0,0 。以 vue 项目为栗，修改 package.json：

{
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  }
}

{
  "scripts": {
    "dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js"
  }
}

2. 设置 webpack-dev-server 的配置项的 host 为 本机ip

{
  "devServer": {
    "host": "192.168.1.111"
  }
}

修改后，重启，就可以使用 http://192.168.1.111:端口 进行访问。

缺点：ip 不一样，每次都要换。

友情提示：ip 访问，一定要确保设备在同一个网络。

# 3. 错误提示 getaddrinfo ENOTFOUND localhost

localhost 可以是任何配置的开发域名。问题所在是 dns 解析错误，所以配置正确的 hosts 修改 hosts

// mac vi /ect/hosts

127.0.0.1    localhost

# 4. 升级 vue-loader v14之后，css 无法加载成功

之前使用的配置项 extractCSS 为 true 无法加载成功，需要修改。

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpackConf = {
  module:{
    rules:[
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          extractCSS: process.env.NODE_ENV === 'production'
        }
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

配置 loader：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpackConf = {
  module:{
    rules:[
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: process.env.NODE_ENV === 'production' ? {
                      css: ExtractTextPlugin.extract({
                        use: 'css-loader',
                        fallback: 'vue-style-loader'
                      })
                    } : {}
        }
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}