Webpack 5 环境下 SCSS 内引用图片、字体编译命名与路径异常

核心问题原因 #

• Webpack 5 内置静态资源处理模块（Asset Modules）默认已启用，会与你配置的file-loader同时命中图片、字体类资源，双重处理下你在file-loader中设置的[name].[ext]命名规则未生效，内置模块生成了带哈希值的资源文件，CSS最终引用的就是这类哈希命名文件
• CopyWebpackPlugin 直接复制静态资源的逻辑和loader处理导出的资源路径重合，引发路径解析优先级冲突
• ImageminWebpWebpackPlugin 的webp转码逻辑会额外生成资源，触发未遵循你命名规则的资源输出

修复步骤 #

1. 为图片、字体的file-loader规则添加配置，禁用Webpack 5内置资源模块的默认处理，同时调整兼容性配置：

// 图片处理规则修改为如下
{
  test: /\.(png|gif|jpe?g|svg|jpg)$/i,
  type: 'javascript/auto', // 禁用内置Asset Modules处理当前匹配资源
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'images/',
      esModule: false, // 适配css-loader的路径解析逻辑
    },
  }],
},
// 字体处理规则同步修改为如下
{
  test: /\.(eot|ttf|woff|woff2)$/,
  type: 'javascript/auto',
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: 'fonts/',
      esModule: false,
    },
  }],
}

2. 调整css-loader配置，保证路径解析正确：

{
  loader: 'css-loader',
  options: {
    url: true,
    esModule: false,
  }
}

3. 删除CopyWebpackPlugin中复制images目录的规则，file-loader会自动把CSS/JS中引用到的资源输出到对应目录。如果有未在代码中引用的静态图片需要保留，可以单独为这部分资源设置独立的存储目录，避免和loader导出的资源路径冲突。
4. 若不需要自动将图片转成webp格式，可暂时注释ImageminWebpWebpackPlugin插件验证命名规则是否生效，确认生效后再按需调整该插件的配置。

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