你真的会用devServer这个配置项嘛?

devServer

通过 webpack-dev-server 的这些配置，能够以多种方式改变其行为。这是一个基本的示例，利用 gzips 压缩 dist/ 目录当中的所有内容并提供一个本地服务(serve)：

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000
}

参数说明

devServer: {
    // 提供静态文件目录地址
    // 基于express.static实现
    contentBase: path.join(__dirname, "dist"),
    // 将此项配置设置为 true 时，将会跳过 host 检查。这是不推荐的因为不检查 host 的应用容易受到 DNS 重新绑定攻击
    disableHostCheck:true,
    // 在所有响应中添加首部内容
    headers: {
      "X-Custom-Foo": "bar"
    },
    // 当启用 lazy 时，dev-server 只有在请求时才编译包(bundle)。这意味着 webpack 不会监视任何文件改动。我们称之为“惰性模式”
    lazy:true,
    // 任意的 404 响应都被替代为 index.html
    // 基于node connect-history-api-fallback包实现
    historyApiFallback: true,
    // 是否一切服务都启用 gzip 压缩
    // 基于node compression包实现
    compress: true,
    // 是否隐藏bundle信息
    noInfo: true,
    // 发生错误是否覆盖在页面上
    overlay: true,
    // 是否开启热加载
    // 必须搭配webpack.HotModuleReplacementPlugin 才能完全启用 HMR。
    // 如果 webpack 或 webpack-dev-server 是通过 --hot 选项启动的，那么这个插件会被自动添加
    hot: true,
    // 热加载模式
    // true代表inline模式，false代表iframe模式
    inline: true, // 默认是true
    // 是否自动打开
    open: true,
    // 设置本地url和端口号
    host: 'localhost',
    port: 8080,
    // 代理
    // 基于node http-proxy-middleware包实现
    proxy: {
        // 匹配api前缀时，则代理到3001端口
        // 即http://localhost:8080/api/123 = http://localhost:3001/api/123
        // 注意:这里是把当前server8080代理到3001，而不是任意端口的api代理到3001
        '/api': 'http://localhost:3001',
        // 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求
        // 主要解决跨域问题
        changeOrigin: true,
        // 针对代理https
        secure: false,
        // 覆写路径：http://localhost:8080/api/123 = http://localhost:3001/123
        pathRewrite: {'^/api' : ''},
        // 输出本次代理请求的日志信息
        bypass: function (req, res, proxyOptions) {
            console.log(proxyOptions.target)
        }
    }
}

哈哈哈哈哈哈，当你看到这里的时候，你应该想多了解点，其实官方文档都有点我都有