2017-12-05

koa2 + webpack 热更新

需要的包

webpack:用于构建项目
webpack-dev-middleware:用于处理静态文件
webpack-hot-middleware:用于实现无刷新更新

webpack.config配置

entry配置webpack-hot-middleware脚本

entry: {
  app:["webpack-hot-middleware/client?noInfo=true&reload=true","./src/module1.js","./src/module2.js"],
  app2:["webpack-hot-middleware/client?noInfo=true&reload=true","./src/module2.js","./src/module3.js"]
}

plugins配置HotModuleReplacementPlugin插件用于热更新

1
2
3

plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]

koa2支持的中间件webpack-dev-middleware的实现

// devMiddleware.js

const webpackDev  = require('webpack-dev-middleware')

const devMiddleware = (compiler, opts) => {
    const middleware = webpackDev(compiler, opts)
    return async (ctx, next) => {
        await middleware(ctx.req, {
            end: (content) => {
                ctx.body = content
            },
            setHeader: (name, value) => {
                ctx.set(name, value)
            }
        }, next)
    }
}

module.exports=devMiddleware;

koa2支持的中间件webpack-hot-middleware的实现

// hotMiddleware.js

const webpackHot = require('webpack-hot-middleware')
const PassThrough = require('stream').PassThrough;

const hotMiddleware = (compiler, opts) => {
    const middleware = webpackHot(compiler, opts);
    return async (ctx, next) => {
        let stream = new PassThrough()
        ctx.body = stream
        await middleware(ctx.req, {
            write: stream.write.bind(stream),
            writeHead: (status, headers) => {
                ctx.status = status
                ctx.set(headers)
            }
        }, next)
    }
    
}


module.exports = hotMiddleware;

koa2实现添加中间件

const Koa = require('koa');
const app = new Koa();
const serve = require('koa-static');

const webpack = require("webpack");
const webpackConfig = require("./webpack.config");
const devMiddleware = require("./devMiddleware");
const hotMiddleware = require('./hotMiddleware');

const compiler = webpack(webpackConfig);


app.use(devMiddleware(compiler));
app.use(hotMiddleware(compiler));

app.use(serve(__dirname + "/dist/", {extensions: ['html']}));

app.listen(3000, () => {
    console.log('app listen at 3000')
});

package.json

版本不同可能会导致乱七八糟的问题，所以给上能用的版本。

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "html-webpack-plugin": "^2.29.0",
    "koa": "^2.3.0",
    "koa-static": "^4.0.1",
    "webpack": "^3.3.0",
    "webpack-dev-middleware": "^1.11.0",
    "webpack-hot-middleware": "^2.18.2"
  }
}