webpack开发环境打包卡住

1、问题现象

项目使用vue-cli@4.4.6版本，一天拉取完最新代码，运行vue-cli-service serve，打包进度到67%~69%就会卡住，光标一直停留在那

2、排查过程

1、首先查看git提交记录，看下最近更新了什么，主要看依赖、webpack相关的更新。

发现vue-cli配置没有更新，所以先排除打包配置问题，最近更新了ESlint，添加了prettier做代码格式校验

"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~4.4.6",
"@vue/cli-plugin-eslint": "~4.4.6",
"@vue/cli-plugin-unit-jest": "~4.4.6",
"@vue/cli-service": "~4.4.6",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-vue": "^8.0.3",
"prettier": "^2.4.1"

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    'plugin:vue/recommended',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

2、排查是不是ESlint和prettier的问题

使用最小系统法，取消所有路由的加载，再一个个引入

经排查是卡在ESlint扫描vendor目录中的第三方库dplayer、ezuikit。这些第三方库因为要修改一些代码，所以直接使用release构建好的版本，基本都是压缩过的min.js。

可能是prettier的问题，ESlint配置里面去掉prettier就正常了，但是prettier还是有必要的，对团队的代码格式风格做限制。

所以从另一个方面考虑，就是不让ESlint扫描这些文件，之前都是在这些min.js文件头部加上/* eslint-disable */的，所以试着加到.eslintignore文件里面，结果就可以了

.eslintignore

dist
src/assets
src/vendor/ezuikit.js
src/vendor/dplayer/*.js

3、总结

1、vue-cli开发环境会用@vue/cli-plugin-eslint插件检查代码，并生成eslint-loader缓存，有时候需要删除node_modules下的.cache目录才能复现问题

2、第三方库(vendor)如果要禁用eslint，建议配置到.eslintignore，而不是单文件添加/* eslint-disable */