Webpack构建Font Awesome时报错：dep.getResourceIdentifier不是函数

我之前也碰到过一模一样的问题，这个错误基本是Webpack版本与插件/loader的兼容性不匹配导致的——getResourceIdentifier是Webpack 5引入的内部API，如果你的项目里有依赖旧版Webpack（比如Webpack 4）的插件/loader，它们调用这个不存在的方法就会抛出这个错误。

下面是几个亲测有效的解决步骤：

1. 先明确版本冲突点 #

先检查你的项目里Webpack和相关工具的版本：

npm list webpack webpack-cli

然后对照每个插件/loader的官方文档，确认它们是否支持当前使用的Webpack版本。比如很多Webpack 4的插件还没适配Webpack 5的API，反过来如果用Webpack 4装了只支持Webpack 5的插件也会出问题。

2. 同步Webpack与相关依赖的版本 #

• 如果用的是Webpack 5：把所有Webpack相关依赖（webpack-cli、各种loader/plugin）更新到支持Webpack 5的最新版本：

  npm update webpack webpack-cli
  # 或者针对具体插件更新，比如babel-loader、css-loader
  npm update babel-loader css-loader
  

• 如果更新后还是报错：说明某个插件还没适配Webpack 5，那可以暂时降级Webpack到4.x版本，同时注意webpack-cli要对应3.x版本（Webpack 5对应webpack-cli 4+，Webpack 4对应webpack-cli 3）：

  npm install webpack@4.46.0 webpack-cli@3.3.12 --save-dev
  

3. 定位具体出问题的依赖 #

从错误栈里的路径（比如你错误里提到的addDependency所在的文件），可以找到是哪个模块触发的错误。比如如果是某个冷门插件，可能已经停止维护，这时候可以考虑替换成功能类似的、兼容当前Webpack版本的插件。

4. 清理缓存重新安装 #

有时候node_modules里的缓存文件会导致奇怪的版本冲突，试试彻底清理后重新安装：

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

附上你遇到的错误详情，方便对照：

Webpack : TypeError: dep.getResourceIdentifier is not a function
错误详情：
At line:1 char:1

• webpack --config .\webpack.config.vendor.js
• CategoryInfo : NotSpecified: (TypeError: dep.... not a function:String) [], RemoteException
• FullyQualifiedErrorId : NativeCommandError
  at addDependency (C:\Users\matt\AppData\Roaming\npm\node_modules\webpa...

内容的提问来源于stack exchange，提问作者Matthew Flynn