Webpack未匹配合适loader处理Leaflet包内PNG图片的报错问题

问题原因 #

你配置的url-loader仅设置了匹配public/img目录下的图片文件，而报错的marker图标存放在node_modules/leaflet/dist/images路径下，不在现有规则的include范围内，webpack无法找到对应loader处理该PNG二进制文件，因此抛出解析错误。不需要更换为file-loader，url-loader本身是file-loader的封装，小于配置limit时转为base64，大于limit时自动复用file-loader的处理逻辑，你现有配置可以满足需求，仅需调整规则匹配范围即可。

解决方案 #

方案1：调整现有图片规则的匹配范围

修改webpack配置中图片处理规则的include字段，将leaflet的图片目录加入匹配列表：

{
  test: /\.(svg|png|jp(e*)g)$/,
  include: [
    path.resolve(__dirname, 'public/img'),
    // 新增leaflet图片目录
    path.resolve(__dirname, 'node_modules/leaflet/dist/images')
  ],
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 10,
        name: '[name].[ext]',
        outputPath: '/img/',
        publicPath: '/login/img/'
      }
    }
  ]
}

方案2：新增单独的leaflet图片处理规则

如果不想改动原有图片规则的匹配范围，可以新增一条专属规则，优先级更高且不会影响其他业务逻辑：

// 放在原有图片处理规则之前即可
{
  test: /\.(png)$/,
  include: [path.resolve(__dirname, 'node_modules/leaflet/dist/images')],
  loader: 'file-loader',
  options: {
    name: '[name].[ext]',
    outputPath: '/img/',
    publicPath: '/login/img/'
  }
}

可选补充配置 #

如果修改配置后打包无报错但地图标记图标无法正常显示，可以在初始化地图代码前加一行配置指定leaflet默认图标加载路径：

import L from 'leaflet'
L.Icon.Default.imagePath = '/login/img/'

内容的提问来源于stack exchange，提问作者karo-s