如何在Typescript/React/Nextjs项目Webpack配置中添加GIF加载器

• 配置优先级错误
  webpack的module.rules规则执行顺序是从下往上匹配，如果你有其他匹配到图片后缀的规则排在你写的file-loader规则之前，会优先执行前置规则导致你的配置不生效，可以把gif的匹配规则挪到rules数组的最前面验证。
• webpack版本冲突
  如果你使用的是webpack 5及以上版本，框架默认已经内置asset/resource模块处理静态资源，不需要单独安装file-loader，两种配置同时存在会产生冲突。你可以把原有file-loader配置替换为以下内容：

{
  test: /\.(gif|svg|jpg|png)$/,
  type: 'asset/resource'
}

• 配置文件未被加载
  如果你使用的是create-react-app等封装过的脚手架，默认会隐藏内置webpack配置，你自行在根目录新增的webpack配置文件不会被识别，需要通过eject命令或者craco、react-app-rewired等工具覆盖配置才会生效。
• 配置位置错误
  确认你的图片匹配规则是写在webpack配置的module.rules数组节点下，不要误写到其他配置节点中。
• 依赖安装异常
  可以先卸载原有file-loader后重装开发依赖，再重启本地服务验证：

npm uninstall file-loader
npm install file-loader -D

• 引入路径错误
  确认你代码中引入gif的路径拼写、大小写、层级和实际文件存放路径完全匹配。

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