记录 webpack-dev-middleware

webpack提供了webpack-dev-server模块来启动一个简单的web服务器，但是当我们的项目需要跟服务器绑定在一起的时候，比如其于koa或express的时候，我们得使用webpack-dev-middleware。

假如在一个express项目中有如下代码：

const webpack = require('webpack'); // webpack模块
const webpackConfig = require('./webpack.dev.conf'); // 开发环境模块
const webpackDevMiddleware = require('webpack-dev-middleware');
const compiler = webpack(webpackConfig);
let devMiddleware = webpackDevMiddleware(complier, {
    publicPath: webpackConfig.output.publicPath,
    quiet: true //向控制台显示任何内容
})

const app = express();
app.use(devMiddleware)

devMiddleware这时就为一个满足express项目的中间件，其格式如下：

function middleware(req,res,next){
    // 做该干的事
    // 做完后调用下一个函数
    next();
}

但是，如果我们使用的是koa，则上面的devMiddleware是不满足其中间件格式的，对于koa的中间件，类似：

app.use(async (ctx, next) => {
    // 做该干的事
    // 做完后调用下一个函数
    next();
});

其只有两个参数，ctx包含了express中间件中的req和res。这种情况下，我们需要把devMiddleware这个中间件再包装一层，使其反回适合koa需要格式的函数。例如

let koaDevMiddleWare = async (ctx,next) => {
    await devMiddleware(ctx.req, {
        end: (content) => {
            ctx.body = content;
        },
        setHeader: (name, value) => {
            ctx.set(name, value);
        }
    }, next);
};

以上方法不一定对，只是表达一种思路。