koa2實現簡易的webpack-dev-server

koa2實現簡易的webpack-dev-server熱更新

原文https://github.com/zhuangZhou/Blog/issues/3

閑來無事，用koa2擼了一個簡易的webpack-dev-server;其實網上很多express搭建的熱更新，但是koa2很少；歡迎大佬拍磚和賜教；
源碼

配置基本的webpack

1、下載安裝包

• webpack
• webpack-cli
• html-webpack-plugin
• css-loader
• style-loader

由於這里用的是最新的webpack版本，所以需要安裝webpack-cli。

2、創建並配置webpack.config.js

這里就不具體配置了，如需要詳細配置教程，請上這里;

基礎配置完成后，在plugins里配置HotModuleReplacementPlugin插件用於熱更新；由於HotModuleReplacementPlugin是webpack內置的插件，所以不需要安裝，直接引用就行

const webpack = require('webpack');
plugins:[
    new webpack.HotModuleReplacementPlugin()
]

實現webpack-dev-middleware的koa2中間件

webpack-dev-middleware是實現webpack-dev-server的核心中間件；

1、下載安裝包

 npm run webpack-dev-middleware -D

2、創建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;

實現webpack-hot-middleware的koa2中間件

1、下載安裝包

npm run webpack-hot-middleware -D

2、創建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;

配置koa入口文件和引入中間件

1、下載安裝包

npm run koa -D

2、創建app.js

const koa = require('koa');
const webpack = require('webpack');

const app = new koa();
const config = require('../webpack.config');
const compiler = webpack(config);

const devMiddleware = require('./devMiddleware');
const hotMiddleware = require('./hotMiddleware');

app.use(devMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

app.use(hotMiddleware(compiler,{
    reload:true
}));

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

app.listen(3000, () => {
    console.log('Example app listening om port 3000!\n');
});

運行

1、在package.json里配置運行命令

"scripts": {
    "watch": "webpack --watch",
    "server": "node server/app.js",
    "build": "webpack"
}

2、啟動剛剛配置好的server

npm run server

3、解決問題

當運行后，在瀏覽器里輸入localhost:3000,運行成功；但是當修改index.js后不會自動刷新瀏覽器；

在webpack.config.js里的entry修改入口文件

entry: {
    index: ['webpack-hot-middleware/client?noInfo=true&reload=true','./src/index.js']
}

這樣就可以自動刷新了；

關於熱更新HTML

這里還是有一個問題，就是關於熱更新html文件;由於HTML-webpack-plugin插件運行時是不經過entry入口的，所以就不能自動編譯HTML文件；

在網上查了很多種方法，其中就是有一種就是:使用raw-loader，將index.html文件引入index.js中，這樣就可以編譯了

module:{
    rules:[
        {
            test:/\.(htm|html)$/,  use: 'raw-loader'
        }
    ]
}

但是仔細想想，這樣是有問題的，就是不能將index.html文件分離出來，所以不推薦；目前還正在研究怎么熱更新，后續會更上；

總結

參考