webpack结合koa实现自动刷新

在咱们开发的过程当中，咱们会使用webpack-dev-server实现自动刷新，webpack-dev-server会把编译后的文件所有保存在内存里，而不会写入到文件目录内。但当咱们的开发是前端和后端在一个项目里的时候就不行了。咱们能够除了可使用webpack结合express实现自动编译刷新，还可使用webpack结合koa实现自动编译刷新

• 配置webpack

首先就是配置webpack的配置。新建一个webpack.config.js文件

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    main: ['./src/main.js']
  },
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'js/[name].js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['.js']
  }
}
复制代码

这里和咱们日常使用webpack的配置同样

• 下面编写服务端koa代码 这里咱们用到了koa-webpack这个模块，咱们无需再设置koa-webpack-middleware，使用起来很是简单

const Koa = require('koa')
const serve = require('koa-static')
const webpack = require('webpack')
const config = require('./webpack.config.js')
const koaWebpack = require('koa-webpack')
const {
  resolve
} = require('path')

const app = new Koa()
const port = process.env.PORT || 3000

async function start() {
  const compiler = webpack(config)
  try {
    const middleware = await koaWebpack({
      compiler
    })
    app.use(middleware)
    app.use(serve(resolve(__dirname, './public')))
    app.listen(3000)
  } catch (e) {
    console.log(e)
  }
}
start()

复制代码

这样，咱们在开发的时候，前端和后端都在同一个服务里运行了