webpack devServer开发服务常用配置

一、publicPath公共路径

publicPath路径下的打包文件可在浏览器中访问。

默认：/，通过http://localhost:8080/bundle.js访问

指定目录访问

publicPath: "/assets/"

通过http://localhost:8080/assets/bundle.js访问

devServer.publicPath 和 output.publicPath 一样被推荐。

二、proxy代理配置

由于前端不能直接调用后端接口，存在跨域，所以需要代理配置，webpack使用的是http-proxy-middleware中间件处理的。

1、简单示例：

proxy: {
  "/api": "http://localhost:3000"
}

请求/api/user会被代理到http://localhost:3000/api/user。

2、路径重写

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

请求/api/user会被代理到http://localhost:3000/user。

3、多个特定路径

如果你想代理多个特定的路径到同一个目标，可以配置context路径数组实现

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

请求/auth/user和/api/user会被代理到http://localhost:3000/user

4、允许不安全https访问

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
} 

5、绕过代理

匹配到html则跳过代理直接返回

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        // console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

三、open

启动服务后自动打开浏览器

devServer: {
  open: true
}

四、修改端口号

devServer: {
  port: 3001
}

五、quiet静默模式

devServer: {
  quiet: true
}

开启后，除了初始启动信息之外的任何内容都不会被打印到控制台

六、socket

devServer: {
  socket: 'socket'
}

七、白名单管理

devServer: {
  allowedHosts: [
    'host.com',
    'subdomain.host.com',
    'subdomain2.host.com',
    'host2.com'
  ]
}

八、https

默认情况下，dev-server 通过 HTTP 提供服务。也可以选择带有 HTTPS 的 HTTP/2 提供服务

devServer: {
  https: true
}

指定证书

devServer: {
  https: {
    key: fs.readFileSync("/path/to/server.key"),
    cert: fs.readFileSync("/path/to/server.crt"),
    ca: fs.readFileSync("/path/to/ca.pem"),
  }
}

九、自定义响应头

在所有响应中添加headers内容

devServer: {
  headers: {
    "X-Custom-Foo": "bar"
  }
}

十、压缩

devServer: {
  compress: true
}

一切服务都启用

十一、日志

devServer: {
  clientLogLevel: "none"
}

值有：

• none 关闭所有日志

• error 只显示错误日志

• warning 只显示告警日志

• info 只显示信息日志

除了这个，还可以直接设置noInfo控制

devServer: {
  noInfo: true // 只显示错误和告警
}

十二、惰性模式

不监听文件变动

devServer: {
  lazy: true
}