webpack+vue-cli项目集成koa2填坑记录

  最近想用koa2做后端，vue做前端，webpack打包做点东西，之前用vue-cli生成了前端的框架，今天想把默认的服务启动模块webpack-dev-server换成我们的koa，小小折腾了一下，这里做个记录。

1. 在项目根目录新建名为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看到已经可以了：