step-05热重载及路由守卫

由于代码越来越多，每次改动都要重新打包，相当的不方便，我们加入热重载。
使用webpack-dev-middleware和webpack-hot-middleware实现热重载。
首先搭建浏览器端的热更新
先看看webpack-dev-middleware包的使用方法

const webpack = require('webpack');
const middleware = require('webpack-dev-middleware');
const compiler = webpack({
   
  // webpack options
});
const express = require('express');
const app = express();

app.use(
  middleware(compiler, {
   
    // webpack-dev-middleware options
  })
);

app.listen(3000, () => console.log('Example app listening on port 3000!'));

发现示例是用于express,我们用的是koa所以需要稍作修改。
查看webpack-dev-middleware的源代码，发现webpack-dev-middleware导出的是一个函数，函数执行后是返回的middleware(context)和一些属性及方法。

  return Object.assign(middleware(context), {
   
    close(callback) {
   
        //code
    },
  } 

middleware(context)返回的是一个函数，参数是req, res, next, 这里的req,res是nodejs的request和response对象，在koa里应该写为ctx.req和ctx.res

return function middleware(req, res, next) {
   
    //code
}

源代码里是通过res.send和res.end发送，我们在第二个参数里将res.end方法修改一下，让它像koa那样返回

if (res.send) {
   
    res.send(content);
} else {
   
    res.end(content);
}

修改后

// 其他代码
const devMiddleware = (compiler, option = null) => {
   
    const middleware = require('webpack-dev-middleware')(compiler, option)
    return async (ctx, next) => {
   
        await middleware(
            ctx.req, 
            // 这里只用传入修改后的end和setHeader方法
            {
   
                end: context => {
   
                    ctx.body = context
                },
                setHeader: (name, value) => {
   
                    ctx.set(name, value)
                }
            },
            next)
    }
}
koaApp.use(devMiddleware(serverCompiler))
// 其他代码

不过有koa-webpack-dev-middleware,我们不用那么麻烦，可以直接像示例那样使用。

const webpackDevMiddleware = require('koa-webpack-dev-middleware')
koaApp.use(webpackDevMiddleware(clientCompiler))

这样要简单多了！
热替换用法差不多

const webpackHotMiddleware = require('koa-webpack-hot-middleware')
koaApp.use(webpackHotMiddleware(clientCompiler))

webpack.client.conf.js里添加插件new webpack.HotModuleReplacementPlugin()。
另外还需要在入口改成数组并加上webpack-hot-middleware/client，使包重建后通知客户端。

    entry: {
   
        client: ['webpack-hot-middleware/client