在我们开发的过程中，我们会使用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()
这样，我们在开发的时候，前端和后端都在同一个服务里运行了
