webpack结合koa实现自动刷新

Posted 2023-04-09

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

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

这里和我们平常使用webpack的配置一样

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

webpack命令监测文件变化

如下2中方法，这里的自动监测变化不是在webpack.config.js中做自动更新代码的配置，而是使用webpack相关命令来实现

1.在wevpack打包完react文件之后，想要每改动一次代码自动页面刷新为最新内容，（这里的刷新还是需要手动点击一下浏览器的刷新按钮），可以全局安装webpack，命令如下：npm install webpack -g，然后开启一个webpack --watch它会帮你监听该项目下所有文件的变化

上面方法是最初级的更新方法，缺点：每次都得手动点击一下浏览器的刷新按钮

2.全局安装webpack-dev-server，命令npm install webpack-dev-server -g，使用webpack-dev-server  --contentbase main开启一个服务，会给出如下地址

Project is running at http://localhost:8080/，此时在浏览器访问http://localhost:8080/webpack-dev-server/index.html即可访问到当前页面，如下图所示

 

 

 

注意（此时的webpack -- watch要继续执行）,此时每次修改浏览器对应会做出热更新