深入Webpack-dev-server
之前介绍了通过配置DevServer可以在本地搭建服务，来对项目进行开发调试，DevServer的相关配置是服务于Webpack-dev-server模块的，本节对该部分内容进行详细介绍。
使用代理
当我们在项目中发起网络请求的时候，为了处理跨域问题避免不了要使用代理来完成请求。可以按照如下所示在DevServer中配置代理：
module.exports = {
devServer: {
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:8888',
changeOrigin: true, // 处理跨域
secure: false // 使用http服务的时候使用该配置
}
},
// http://localhost:8080/api -> http://localhost:8888/api
},
}
当你http://localhost:8888/有服务的时候，那么请求就会代理到该服务上去，为了演示该效果，在这里使用了Express搭建了一个简单的Http服务器，代码如下：
const express = require("express");
const app = express();
app.get('/api', (req, res) => {
res.json({
title: '测试' })
});
app.listen(8888);
Before
在每次请求发送之前，可以配置Before充当请求拦截器的角色，以此来做一些请求前的操作：
module.exports = {
devServer: {
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:8888',
changeOrigin: true, // 处理跨域
secure: false // 使用http服务的时候使用该配置
}
},
before(app) {
app.get('/userInfo', function (req, res) {
res.json({
name: 'Render' });
});
}
// http://localhost:8080/api -> http://localhost:8888/api
},
}
当我们请求/userInfo的时候，会被Before中的配置所拦截，这里的app你可以理解为Express中创建的app实例，还可以配置After，来对请求完成之后做一些操作。
Http-proxy-middleware
代理的实现是因为使用了Http-proxy-middleware库，该库对请求的代理提供了非常好的实现。
一个简单示例如下：
const proxy = require('http-proxy-middleware');
module.exports = (app) => {
app.use(
'/api',
proxy({
target: 'http://localhost:8080',
changeOrigin: true,
secure: true
})
)
}
在DevServer中的Before中使用该代理配置，就把代理配置抽离了出去：
const proxy = require('./proxy')
module.exports = {
devServer: {
before(app) {
proxy(app)
}
}
}
抽离DevServer配置
DevServer的使用只是在开发环境时方便本地开发，良好的实践是抽离该配置，单独进行维护。
新建webpack.devServer.js，内容如下：
module.exports = () => {
return {
open: true,
before(app) {
require('./proxy')(app)
}
}
}
require(’./proxy’)引入的方法就是我们上一节创建的代理配置函数。
start.js中进行如下代码编写：
const WebpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const devConfig = require('./src/webpack.devServer')();
// 得到一个compiler编译对象
const compiler = webpack(webpackConfig)
// 需要一个webpack编译对象和devServer配置对象
const server = new WebpackDevServer(compiler, devConfig);
server.listen(8080);
通过new WebpackDevServer得到了一个服务器对象，然后使用该对象创建一个端口号为8080的服务，至此实现了DevServer配置的抽离。只需在package.json的scripts中进行如下配置：
{
"scripts": {
"dev": "node ./start.js"
}
}
就可以成功运行DevServer。
本章节提供案例源码下载：https://gitee.com/mvc_ydb/webpack/blob/master/webpack-dev-server.zip