乐趣区

关于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)
        }
    }
}

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

退出移动版