前言webpack提供了webpack-dev-server模块来启动一个简单的web服务器。为了更大的自由，我们可以自己配置一个服务器。下面介绍如何使用koa2来实现。wepack-dev-middlewarewepack-dev-middleware将webpack处理后的配置文件传递给服务端，但是在我们使用之前，需要将其转化为koa中间件。安装wepack-dev-middleware:npminstallwepack-dev-middleware-D打包成koa中间件。devMiddleware.js://转化为koa中间件constwebpackDev=require('webpack-dev-middleware');constdevMiddleware=(compiler,opts)=>{constmiddleware=webpackDev(compiler,opts);returnasync(ctx,next)=>{awaitmiddleware(ctx.req,{end:(content)=>{ctx.body=content;},setHeader:(name,value)=>{ctx.set(name,值);}},下一步);};};module.exports=devMiddleware;webpack-hot-middlewarewebpack-hot-middleware模块主要是用来实现热替换的，也就是说我们修改文件后只需要滑动客户端页面就可以看到有用。因为webpack-hot-middleware生成的模块是写入内存的，所以我们需要修改开发环境中的output配置项：//webpack.dev.conf.jsoutput:{filename:'[name].[hash].js',path:'/'//修改此配置项}安装webpack-hot-middleware:npminstallwebpack-hot-middleware-D打包成koa中间件。hotMiddleware.js://转化为koa中间件constwebpackHot=require('webpack-hot-middleware')constPassThrough=require('stream').PassThrough;consthotMiddleware=(compiler,opts)=>{constmiddleware=webpackHot(compiler,opts);returnasync(ctx,next)=>{letstream=newPassThrough();ctx.body=流；等待中间件（ctx.req，{write：stream.write.bind（stream），writeHead：（状态，标题）=>{ctx.status=status;ctx.set（标题）;}}，下一个）;};};module.exports=hotMiddleware;koa2实现服务器安装koa:npminstallkoa-Dserver.js:constKoa=require('koa');constwebpack=require('webpack');//webpack模块constconfig=require('./webpack.dev.conf');//开发环境模块//中间件容器，将webpack处理后的文件传递给服务器constdevMiddleware=require('./devMiddleware');//插件编译在内存中，不写入磁盘以提高性能consthotMiddleware=require('./hotMiddleware');constcompiler=webpack(config);constapp=newKoa();app.use(devMiddleware(compiler,{publicPath:config.output.publicPath//'/'}));app.use(hotMiddleware(compiler));app.listen(3000);console.log('在端口3000丢失');配置包。json:"scripts":{"server":"nodeserver.js--modedevelopment"}启动服务器：npmrunserver通过koa2配置koa2中间件，社区也提供打包好的中间件，比如koa-webpack和koa-webpack-middleware，不过后者很久没有维护了。下面我们使用koa-webpack来简化配置和安装依赖：require('webpack');constconfig=require('./webpack.dev.conf.js');constcompiler=webpack(config);constapp=newKoa();app.use(middleware({编译器：compiler}));app.listen(3000);console.log('losteningonport3000');Moduleversion:"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-中间件":"^2.21.1",}
