使用Webpack+Leaflet时initMap导出未找到问题排查

我一眼就注意到你的Webpack配置里藏着一个关键问题——image-webpack-loader的规则没有指定匹配的文件类型！这个错误会让它去处理所有模块，包括你的map.js文件，直接破坏了JavaScript代码的结构，导致Webpack无法正确识别你导出的initMap函数，这就是警告出现的核心原因。

解决方案步骤： #

1. 修复image-webpack-loader的规则
   打开你的webpack.config.js，找到单独的image-webpack-loader规则，给它添加正确的test匹配，让它只处理图片文件：

   // 原来的错误规则
   // { loader: 'image-webpack-loader', options: { ... } },
   
   // 修改后的正确规则
   {
     test: /\.(gif|png|jpe?g|svg)$/i,
     loader: 'image-webpack-loader',
     options: {
       mozjpeg: { progressive: true, quality: 70 },
       optipng: { enabled: true },
       pngquant: { quality: [0.7, 0.7], speed: 4 },
       gifsicle: { interlaced: false },
     },
   },
   

   这个修改会限制图片优化 loader 只作用于图片格式文件，不会再干扰你的JavaScript模块。

2. 优化Leaflet的导入方式（可选但推荐）
   把map.js里的Leaflet导入路径从：

   import L from "leaflet/dist/leaflet";
   

   改成：

   import L from 'leaflet';
   

   直接导入包根目录的话，Webpack会自动识别Leaflet的正确入口文件（符合ES模块规范的版本），避免手动引入dist目录下的UMD模块可能带来的解析问题。

验证效果 #

修改完成后，重新运行Webpack构建命令，你会发现export 'initMap' was not found的警告消失了，initMap函数能正常导入执行，地图也会正确渲染出来。

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