记录 webpack-dev-middleware

221 7 个月前
webpack-dev-middleware,作用是生成一个与webpack的compiler绑定的中间件,然后在express启动的服务app中调用这个中间件

webpack提供了webpack-dev-server模块来启动一个简单的web服务器,但是当我们的项目需要跟服务器绑定在一起的时候,比如其于koaexpress的时候,我们得使用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中间件中的reqres。这种情况下,我们需要把devMiddleware这个中间件再包装一层,使其反回适合koa需要格式的函数。例如

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

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

没有了
分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6