前言

webpack提供了webpack-dev-server模块来启动一个简单的web服务器，为了更大的自由度我们可以自己配置一个服务器，下面介绍如何用koa2来实现。

wepack-dev-middleware

wepack-dev-middleware把webpack处理后的配置文件传递给服务器，不过我们在使用它之前，需要把它改造成koa中间件。

安装wepack-dev-middleware：

npm install wepack-dev-middleware -D

封装成koa中间件。devMiddleware.js：

// 改造成koa中间件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

webpack-hot-middleware模块主要用来实现热替换，也就是说我们在修改文件后只需刷客户端页面就能看到效果了。因为通过webpack-hot-middleware生成的模块是写入到内存中的，所以我们需要修改开发环境中的output配置项：

// webpack.dev.conf.jsoutput: {  filename: '[name].[hash].js',  path: '/' // 修改此配置项}

安装webpack-hot-middleware：

npm install webpack-hot-middleware -D

封装成koa中间件。hotMiddleware.js：

// 改造成koa中间件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实现服务器

安装koa：

npm install koa -D

server.js：

const Koa = require('koa');const webpack = require('webpack'); // webpack模块const config = require('./webpack.dev.conf'); // 开发环境模块// 中间件容器，把webpack处理后的文件传递给一个服务器const devMiddleware = require('./devMiddleware');// 在内存中编译的插件，不写入磁盘来提高性能const hotMiddleware = require('./hotMiddleware');const compiler = webpack(config);const app = new Koa();app.use(devMiddleware(compiler, {  publicPath: config.output.publicPath // '/'}));app.use(hotMiddleware(compiler));app.listen(3000);console.log('lostening on port 3000');

配置package.json:

"scripts": {  "server": "node server.js --mode development"}

启动服务器：

npm run server

通过koa2中间件配置

koa2社区也提供了封装好的中间件，例如koa-webpack和koa-webpack-middleware,不过后者已经好久没有维护了，下面我们用koa-webpack来简化配置。

安装依赖：

npm install koa-webpack -D

修改server.js:

const Koa = require('koa');const middleware = require('koa-webpack');const webpack = require('webpack');const config = require ('./webpack.dev.conf.js');const compiler = webpack(config);const app = new Koa();app.use(middleware({  compiler: compiler}));app.listen(3000);console.log('lostening on port 3000');

模块版本：

"devDependencies": {  "koa": "^2.5.0",  "koa-webpack": "^3.0.0",  "webpack": "^4.0.1",  "webpack-cli": "^2.0.9",  "webpack-dev-middleware": "^3.0.0",  "webpack-hot-middleware": "^2.21.1",}