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

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