webpack-dev-server

一个轻量级的node.js express 服务器

安装错误处理

已经安装了 webpack-dev-server，但还是报错：

@multi main or Cannot resolve module 'webpack/hot/dev-server'

解决方法：所有全局安装的模块都再次进行本地安装

启动

webpack-dev-server有两种启动模式：

　 　1.iFrame：该模式下修改代码后会自动打包，但是浏览器不会自动刷新　 　2.inline：内联模式，该模式下修改代码后，webpack将自动打包并且刷新浏览器，让我们看到最终的修改效果

Hot Modules Replacemant (hmr模块热部署)

我们的修改后的代码不仅可以自动打包，而且浏览器不用完全刷新，只需要异步刷新，加载修改后部分代码即可，加载完成效果会马上反应在页面效果上       webpack-dev-server --inline --hot

Proxy

devServer.proxy 利用 http-proxy-middleware包进行 url 代理，

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

所有请求到/api/users 都会被代理到

另外一种情况就是，如果你在代理的url 中不需要 /api,可以去重写这个路径：

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

**后台服务运行在 拥有无效证书的https 服务时，默认会被拒绝，

如果真正想去接收，就需要配置** secure:

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

下面的几种配置不是经常用到

有时候，我们不想去代理所有的请求，就可以依照指定的函数返回值，绕开代理

这个函数可以接收到三个参数，request,response 和 代理配置， 并且函数必须返回 false 或者 一个服务url 来取代代理

比如，一个浏览器请求，你要返回一个html页面，同时对于一个api 请求就要去代理它，就可以设置如下的配置。

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";          }        }      } }

如果要去代理多个路径到一个目标url下，就可以设置一个数组

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