最近想用koa2做后端,vue做前端,webpack打包做点东西,之前用vue-cli生成了前端的框架,今天想把默认的服务启动模块webpack-dev-server换成我们的koa,小小折腾了一下,这里做个记录。
- 在项目根目录新建名为server的文件夹,然后里面新建middleware文件夹存放koa中间件,再新建一个启动文件app.js
2.在middleware文件夹中新建一个js(网上很多),内容如下:
const webpackDev = require('webpack-dev-middleware');//安装此包最好不要装最新版本,否则会提示需要webpack4.0及以上版本
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;
3.app.js里面添加如下代码(网上很多):
const Koa = require('koa');
const webpack = require('webpack'); // webpack模块
const config = require('../build/webpack.dev.conf'); // 开发环境模块
// 中间件容器,把webpack处理后的文件传递给一个服务器
const devMiddleware = require('./middleware/devMiddleware');
const compiler = webpack(config)
const app = new Koa();
app.use(devMiddleware(compiler));
app.listen(3000);
这里写的是最简化的版本,没有做什么日志打印、热更新什么的,端口也是写死的,就为了先把前后端打通再说。
4.再修改package.json文件,添加启动项:
"koa": "node server/app development"
看样子差不多了,在命令行运行npm run koa试一下…
啊哦,一坨错误,来看一下:
说什么webpack编译时找不到entry,看了下代码,entry是配在webpack.base.conf.js文件中的,而在webpack.dev.conf.js里引用了这个文件,最终用module.exports导出…按理说没毛病啊…
等等…再仔细看下webpack.dev.conf.js中module.exports导出的方式:
module.exports = new Promise((resolve, reject) => {
portfinder.basePort = process.env.PORT || config.dev.port
portfinder.getPort((err, port) => {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}
})
})
原来是个promise(我也不知道我生成的代码为啥这里是promise,别人的貌似都不是,不知道是别人改过还是其他什么问题,不纠结了),那我们的webpack(config)肯定有问题啊,所以修改app.js中的内容:
const Koa = require('koa');
const webpack = require('webpack'); // webpack模块
const config = require('../build/webpack.dev.conf'); // 开发环境模块
let compiler;
// 中间件容器,把webpack处理后的文件传递给一个服务器
const devMiddleware = require('./middleware/devMiddleware');
// 在内存中编译的插件,不写入磁盘来提高性能
// const hotMiddleware = require('./middleware/hotMiddleware');
const app = new Koa();
config.then(function(s){//既然导出的是promise,那就用相应的方式来处理就好了
compiler = webpack(s)
app.use(devMiddleware(compiler));
app.listen(3000);
});
再运行下npm run koa,看到没有报错了,用浏览器打开localhost:3000看到已经可以了: