运行webpack serve报错Can't resolve 'file-loader'如何解决

问题根因 #

你在webpack配置中声明了使用file-loader处理图片资源，但package.json的开发依赖中并未安装该包，因此webpack执行时找不到对应依赖抛出报错。

解决方法 #

提供两种可选方案：

方案1：安装file-loader依赖

直接执行以下命令安装对应依赖即可：

npm install file-loader --save-dev

安装完成后重新执行npm run dev启动服务即可。

方案2（更推荐）：使用Webpack5内置资源模块

Webpack5已经内置了Asset Modules能力，无需额外安装file-loader、url-loader等第三方loader即可处理静态资源，你只需要修改webpack配置中图片资源的处理规则即可：

// 把原来的图片处理规则替换为如下内容
{
  test: /\.(png|jpe?g|svg|gif)$/,
  type: 'asset/resource',
}

修改完成后重新启动服务即可正常运行。

异常排查 #

如果执行上述操作后仍有报错，可以删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装所有依赖后再启动服务，规避依赖缓存导致的异常。

内容的提问来源于stack exchange，提问作者Gabriel Gamboa Vargas