Webpack构建图片/字体异常：路径错误且内容为JS代码求助

1. Webpack5内置Asset模块与url-loader冲突 #

Webpack5之后自带了asset/resource、asset/inline等模块，完全可以替代url-loader/file-loader的功能。如果混用旧的url-loader却没正确禁用内置资源处理规则，两者逻辑冲突会把静态资源当成JS模块打包，生成带export default的内容，而非实际的图片/字体文件。

2. 错误配置了type: 'javascript/auto' #

要是在url-loader的规则里加了type: 'javascript/auto'，会强制Webpack把资源按JS模块解析，直接打断url-loader原本的逻辑——本该在阈值内转base64、阈值外输出静态文件，结果变成生成JS模块文件。

3. 输出路径配置错误 #

• 没给url-loader（或配套的file-loader）设置outputPath，或者Webpack5 Asset模块的generator.filename配置不对，比如没写assets/images/前缀，导致资源直接输出到构建根目录，而非指定的子目录。
• 正确的路径配置应该是类似assets/images/[name].[hash][ext]的格式，确保资源归入指定文件夹。

4. CSS资源引用被当成模块解析 #

如果你的CSS Loader开了modules: true，或者把资源匹配规则写到了CSS模块的规则里，会让CSS中url()引用的资源被当作JS模块导入，最终生成异常的模块文件，而非静态资源引用。

方案1：改用Webpack5内置Asset模块（推荐） #

直接弃用url-loader，用Webpack原生的资源处理能力，配置更简洁：

module.exports = {
  module: {
    rules: [
      // 处理图片资源
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/images/[name].[hash][ext]'
        },
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8KB以内转base64，超出则输出文件
          }
        }
      },
      // 处理字体资源
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name].[hash][ext]'
        }
      }
    ]
  }
};

方案2：修正url-loader配置（兼容旧项目） #

如果必须用url-loader，确保配置正确，避免和内置模块冲突：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8 * 1024, // 阈值设置
              outputPath: 'assets/images/', // 指定输出目录
              name: '[name].[hash].[ext]' // 文件名格式
            }
          }
        ],
        // 仅在需要兼容Webpack4逻辑时添加，否则删除这一行
        type: 'javascript/auto'
      }
    ]
  }
};

额外检查 #

确认CSS Loader的配置没有误开modules: true，除非你确实需要CSS模块化功能，普通样式文件不要启用该选项，避免资源引用被错误解析。

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