关于webpack:你真的会用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)
        }
    }
}

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