前期场景
基于Webpack的项目，项目的配置文件、package.json、环境变量文件发生了变更都需要手动重启项目，才可以在浏览器中看到效果。由于这些都是静态的配置文件，如果需要让他们的变更能够触发项目自动重启，就需要一个工具去监听他们的变化，这个时候nodemon隆重登场了
nodemon^1^
nodemon 是一个工具，可在检测到目录中的文件更改时自动重新启动节点应用程序，从而帮助开发基于 Node.js 的应用程序。
nodemon不需要对您的代码或开发方法进行任何额外的更改。要使用nodemon，请在执行脚本时nodemon 替换命令行上的单词node
全局安装
powershell
npm i -g nodemon局部安装
powershell
npm i -D nodemon使用配置
启动命令配置
powershell
{
script:{
"serve-w":"nodemon --watch vue.config.js exec \"vue-cli-service serve\""
}
}在package.json中配置
在package.json文件中添加nodemonConfig节点
javascript
{
"name": "nodemon",
"homepage": "http://nodemon.io",
"...": "... other standard package.json values",
"nodemonConfig": {
"watch":["vue.config.js",".env"],
"exec":"vue-cli-service serve"
}
}再在package.json添加启动命令
javascript
{
"script":{
"serve-w":"nodemon"
}
}项目根目录添加nodemon.json文件
javasript
{
"watch":["vue.config.js",".env"],
"exec":"vue-cli-service serve"
}再在package.json添加启动命令
javascript
{
"script":{
"serve-w":"nodemon"
}
}常用配置参数说明
| 参数名 | 参数描述 | 数据类型 |
|---|---|---|
| watch | 需要监听的文件或文件夹 | Array |
| exec | 监听后需要启动的命令 | String |
| ignore | 需要忽略监听的文件或文件夹 | Array |
| delay | 延迟重启的时间，默认单位秒可传入精确单位如:2500ms | String，Number |
| events | 当nodemon状态改变时触发事件,定义通知的文字 | String |
结尾拓展
经过这样子配置，一编辑被监听的文件，就会触发项目自动的重启，而项目启动的时长是与项目的大小成正相关的，如果项目很大，项目重启时间过长，这样也会减轻开发体验；这时就可以通过splitChunk来减轻编译形成的包的大小，模块分包（静态模块预编译）来预先将部分node_modules包打包来降低编译的内容的大小，再通过开启Webpack的持久缓存和多进程编译来提升二次编译的速度，从而减少项目重启的时长