Webpack5运行编译图片报错无法解析file-loader如何解决？

问题根因 #

1. 你的Webpack配置中明确使用file-loader处理图片、字体资源，但未将该依赖安装到项目中，因此编译时触发模块找不到的报错。报错关联到mini-css-extract-plugin是因为你在SCSS文件中引用了图片资源，加载SCSS的链路中触发了资源加载逻辑，并非mini-css-extract-plugin本身故障，因此重装该插件无法解决问题。
2. 你的Webpack配置顶部缺失path模块引入，后续调用path.resolve、path.join时也会触发报错。

可行解决方案 #

方案1：继续使用file-loader #

• 安装file-loader到开发依赖：

# npm执行
npm install file-loader --save-dev
# yarn执行
yarn add file-loader -D

• 在Webpack配置顶部补全path模块引入：

const path = require('path');

• 清理缓存：删除项目下的node_modules文件夹、package-lock.json或yarn.lock文件，重新执行依赖安装命令后启动项目即可。

方案2：改用Webpack5内置Asset Modules（更推荐，无需额外安装loader） #

Webpack5内置了资源处理能力，完全可以替代file-loader、url-loader等旧工具，不需要额外安装依赖：

• 替换原有图片、字体的loader配置为以下内容：

module.exports = {
  module: {
    rules: [
      // 原有js、scss的rule保留，替换原来的图片、字体处理规则
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[path][name].[ext]?[contenthash]'
        }
      },
      {
        test: /\.(woff(2)?|ttf|eot|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[ext]'
        }
      }
    ]
  }
}

• 同样在Webpack配置顶部补全const path = require('path');引入，重启项目即可。

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