Webpack 5 构建React应用时出现Can't resolve images图片加载报错问题

你遇到的编译报错是webpack在解析scss文件中的图片路径时，按照相对路径规则查找资源失败导致的：

• 你在src/app/component/style.scss中使用了./images/picture.png的相对路径，webpack会默认从当前scss文件所在的src/app/component/目录下查找images/picture.png
• 你的实际图片存放在项目根目录的static/images/路径下，路径不匹配直接触发解析失败

下面提供3种可选择的修复方案，根据你的使用习惯选择即可：

方案1：直接修改scss内的引用路径 #

不需要改webpack配置，直接调整scss里的图片路径为从当前文件到static目录的相对路径即可：

/* 从src/app/component/ 回退3层到项目根目录，再进入static/images */
background: url('../../../../static/images/picture.png');

方案2：配置路径别名减少相对路径层级书写 #

先修改webpack配置，给static目录配置别名：

const path = require('path');
module.exports = {
  // 其他配置保持不变
  resolve: {
    alias: {
      // 配置@static指向项目根目录下的static文件夹
      '@static': path.resolve(__dirname, 'static')
    }
  }
}

之后在scss中引用图片时，使用别名路径即可，注意scss中使用webpack别名需要加~前缀：

background: url('~@static/images/picture.png');

方案3：添加静态目录到webpack搜索路径 #

如果希望直接写images/picture.png就能解析到静态资源，可以修改webpack配置，把static目录加入模块搜索列表：

const path = require('path');
module.exports = {
  // 其他配置保持不变
  resolve: {
    modules: [
      'node_modules',
      // 添加static目录到搜索路径
      path.resolve(__dirname, 'static')
    ]
  }
}

之后scss中直接写文件名路径即可：

background: url('images/picture.png');

因为你使用了resolve-url-loader处理sass中的路径，需要确保sass-loader开启了sourceMap配置，否则可能会出现路径解析异常：

// 修改sass-loader的配置项
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'resolve-url-loader',
    {
      loader: 'sass-loader',
      options: {
        // 必须开启sourceMap，resolve-url-loader才能正常工作
        sourceMap: true
      }
    }
  ]
}

你的现有asset/resource配置是正确的，打包后图片会输出到dist/ui/images/目录下，和你的预期一致，不需要修改。

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