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 都会被代理到 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',
}]