Express结合结合Webpack的全栈自动刷新的全栈自动刷新
在以前的一篇文章自动刷新 从BrowserSync开始中,我介绍了BrowserSync这样一个出色的开发工具。通过BrowserSync我感
受到了这样一个理念:如果在一次ctrl + s保存后可以自动刷新,然后立即看到新的页面效果,那会是很棒的开发体验。
现在,webpack可以说是最流行的模块加载器(module bundler)。一方面,它为前端静态资源的组织和管理提供了相对较完
善的解决方案,另一方面,它也很大程度上改变了前端开发的工作流程。在应用了webpack的开发流程中,想要继续“自动刷
新”的爽快体验,就可能得额外做一些事情。
webpack与自动刷新与自动刷新
本文并不打算介绍webpack,webpack要求静态资源在被真正拿来访问之前,都要先完成一次编译,即运行完成一次webpack
命令。因此,自动刷新需要调整到适当的时间点。也就是说,修改了css等源码并保存后,应该先触发一次webpack编译,在
编译完成后,再通知浏览器去刷新。
开发开发Express项目的问题项目的问题
现在有这样的一个应用了webpack的Express项目,目录结构如下:
其中,client内是前端的静态资源文件,比如css、图片以及浏览器内使用的javascript。server内是后端的文件,比如express
的routes、views以及其他用node执行的javascript。根目录的app.js,就是启动express的入口文件了。
开发的时候我们会怎样做呢?
先启动Express服务器,然后在浏览器中打开某个页面,接下来再编辑源文件。那么,问题就来了,比如我编辑.scss源文件,
即使我只改了一小点,我也得在命令行里输入webpack等它编译完,然后再切到浏览器里按一下F5,才能看到修改后的效
果。
再比如,我修改了routes里的.js文件想看看结果,我需要到命令行里重启一次Express服务器,然后同样切到浏览器里按一下
F5。
这可真是太费事了。
所以,我们要让开发过程愉快起来。
改进目标改进目标
我们希望的Express&Webpack项目的开发过程是:
如果修改的是client里的css文件(包括.scss等),保存后,浏览器不会整页刷新,新的样式效果直接更新到页面内。
如果修改的是client里的javascript文件,保存后,浏览器会自动整页刷新,得到更新后的效果。
如果修改的是server里的文件,保存后,服务器将自动重启,浏览器会在服务器重启完毕后自动刷新。