1 最开始报错

1）错误信息

Error: Cannot find module 'html-webpack-plugin'

 

2）原因

　　这个错误表明项目依赖中没有安装 html-webpack-plugin。这是一个常用的Webpack插件，用来生成HTML文件

 

3）安装后报错

TypeError: Cannot read properties of undefined (reading 'createSnapshot')
TypeError: Cannot read properties of undefined (reading 'tapAsync')
TypeError: Cannot read properties of undefined (reading 'createSnapshot')
    at D:\code_project\health-platform\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (D:\code_project\health-platform\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:12:10)
    at D:\code_project\health-platform\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:219:35
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
TypeError: Cannot read properties of undefined (reading 'createSnapshot')
    at D:\code_project\health-platform\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (D:\code_project\health-platform\node_modules\html-webpack-plugin\lib\webpack5\file-watcher-api.js:12:10)
    at D:\code_project\health-platform\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:219:35
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

　　直接锁定了问题根源：html-webpack-plugin 插件错误地引用了Webpack 5的API。

　　项目使用的是 Webpack 4.47.0，但 html-webpack-plugin 插件版本过高（或内部逻辑错误），尝试调用了一个只在 Webpack 5 中才存在的 createSnapshot 方法

 

4）查看插件

　　这里本没问题

npm list html-webpack-plugin
PS D:\code_project\health-platform> npm list html-webpack-plugin
vue-manage-system@4.2.0 D:\code_project\health-platform
├─┬ @vue/cli-service@3.12.1
│ ├─┬ @vue/preload-webpack-plugin@1.1.2
│ │ └── html-webpack-plugin@4.5.2 deduped
│ └── html-webpack-plugin@3.2.0
└── html-webpack-plugin@4.5.2

 

5）查看webpack

npm list webpack
PS D:\code_project\health-platform> npm list webpack
vue-manage-system@4.2.0 D:\code_project\health-platform
├─┬ @vue/cli-plugin-babel@3.12.1
│ ├─┬ babel-loader@8.4.1
│ │ └── webpack@5.104.1 deduped
│ └─┬ webpack@4.47.0
│   └─┬ terser-webpack-plugin@1.4.6
│     └── webpack@4.47.0 deduped
├─┬ @vue/cli-service@3.12.1
│ ├─┬ @intervolga/optimize-cssnano-plugin@1.0.6
│ │ └── webpack@4.47.0 deduped
│ ├─┬ @soda/friendly-errors-webpack-plugin@1.8.1
│ │ └── webpack@5.104.1 deduped
│ ├─┬ @vue/preload-webpack-plugin@1.1.2
│ │ └── webpack@5.104.1 deduped
│ ├─┬ cache-loader@2.0.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ css-loader@1.0.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ file-loader@3.0.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ html-webpack-plugin@3.2.0
│ │ └── webpack@4.47.0 deduped
│ ├─┬ mini-css-extract-plugin@0.8.2
│ │ └── webpack@4.47.0 deduped
│ ├─┬ terser-webpack-plugin@1.4.6
│ │ └── webpack@4.47.0 deduped
│ ├─┬ thread-loader@2.1.3
│ │ └── webpack@4.47.0 deduped
│ ├─┬ url-loader@1.1.2
│ │ └── webpack@4.47.0 deduped
│ ├─┬ vue-loader@15.11.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ webpack-dev-server@3.11.3
│ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ └── webpack@5.104.1 deduped
│ │ └── webpack@5.104.1 deduped
│ └── webpack@4.47.0
├─┬ html-loader@3.1.2
│ └─┬ webpack@5.104.1
│   └─┬ terser-webpack-plugin@5.3.16
│     └── webpack@5.104.1 deduped
├─┬ html-webpack-plugin@4.5.2
│ └── webpack@5.104.1 deduped
└─┬ less-loader@6.2.0
  └── webpack@5.104.1 deduped
根据 npm list webpack 的输出，我们看到：
　　核心包 @vue/cli-service 依赖并主要使用的是 webpack@4.47.0。
　　但是，后来安装的 html-webpack-plugin@4.5.2，以及 html-loader、less-loader、webpack-dev-server 内部的某些模块，都引入了 webpack@5.104.1。
　　这导致了 “依赖冲突” (Dependency Hell)。Node.js 的模块解析机制可能让部分插件错误地加载了 Webpack 5，从而引发 API 不存在的错误。

 

6）处理

　　在 package.json 中强制指定 Webpack 版本

　　在你的 package.json 文件中，与 dependencies 同级，添加一个 overrides 字段

{
  "name": "vue-manage-system",
  "version": "4.2.0",
  "dependencies": {
    // ... 你的其他依赖
  },
  "devDependencies": {
    // ... 你的其他开发依赖
  },
  "overrides": {
    "webpack": "4.47.0",
    "webpack-dev-server": "3.11.3"
  }
}

　　执行命令

# 1. 删除 node_modules 和 lock 文件
Remove-Item -Recurse -Force node_modules, package-lock.json

# 2. 清除 npm 缓存
npm cache clean --force

# 3. 重新安装依赖，让 overrides 生效
npm install

 

7）再查看webpack

　　发现webpack版本全部变为4.47.0，启动成功。

npm list webpack
PS D:\code_project\health-platform> npm list webpack
vue-manage-system@4.2.0 D:\code_project\health-platform
├─┬ @vue/cli-plugin-babel@3.12.1
│ ├─┬ babel-loader@8.4.1
│ │ └── webpack@4.47.0 deduped
│ └── webpack@4.47.0 overridden
├─┬ @vue/cli-service@3.12.1
│ ├─┬ @intervolga/optimize-cssnano-plugin@1.0.6
│ │ └── webpack@4.47.0 deduped
│ ├─┬ @soda/friendly-errors-webpack-plugin@1.8.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ @vue/preload-webpack-plugin@1.1.2
│ │ └── webpack@4.47.0 deduped
│ ├─┬ cache-loader@2.0.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ css-loader@1.0.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ file-loader@3.0.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ html-webpack-plugin@3.2.0
│ │ └── webpack@4.47.0 deduped
│ ├─┬ mini-css-extract-plugin@0.8.2
│ │ └── webpack@4.47.0 deduped
│ ├─┬ terser-webpack-plugin@1.4.6
│ │ └── webpack@4.47.0 deduped
│ ├─┬ thread-loader@2.1.3
│ │ └── webpack@4.47.0 deduped
│ ├─┬ url-loader@1.1.2
│ │ └── webpack@4.47.0 deduped
│ ├─┬ vue-loader@15.11.1
│ │ └── webpack@4.47.0 deduped
│ ├─┬ webpack-dev-server@3.11.3 overridden
│ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ └── webpack@4.47.0 deduped
│ │ └── webpack@4.47.0 deduped
│ └── webpack@4.47.0 deduped
├─┬ html-loader@3.1.2
│ └── webpack@4.47.0 deduped
├─┬ html-webpack-plugin@4.5.2
│ └── webpack@4.47.0 deduped
└─┬ less-loader@6.2.0
  └── webpack@4.47.0 deduped