看起来你遇到的问题是Webpack在处理动态导入时，没有优先选用vanilla-lazyload的module字段对应的ES模块文件，而是选择了main字段的压缩版UMD文件。咱们可以从以下几个方向排查和解决：

1. 检查Webpack的resolve.mainFields配置 #

Webpack通过resolve.mainFields决定读取package.json字段的优先级，默认针对浏览器环境（target: 'web'）的配置是["browser", "module", "main"]，但如果你的配置被修改过，可能导致module字段优先级低于main。

你可以在Webpack配置中显式指定该字段，确保module排在main前面：

module.exports = {
  // ...其他配置项
  resolve: {
    mainFields: ['browser', 'module', 'main']
  }
};

2. 排查Babel插件是否干扰动态导入解析 #

虽然@babel/preset-env默认包含@babel/plugin-syntax-dynamic-import，但如果你的Babel配置中引入了类似babel-plugin-dynamic-import-node这类插件，会把动态导入语法转换成Node.js的require()调用，这会导致Webpack无法按照ES模块逻辑解析module字段。

检查你的Babel配置和依赖列表，确保没有这类会修改动态导入行为的插件。另外，无需额外配置，@babel/preset-env默认会启用syntax-dynamic-import。

3. 对比静态导入的行为 #

先测试静态导入vanilla-lazyload的场景：

import LazyLoad from 'vanilla-lazyload';

查看打包后的资源，如果静态导入能正确选用dist/lazyload.esm.js，说明问题出在动态导入的处理逻辑上；如果静态导入也选用了min.js，那基本可以确定是Webpack的resolve配置存在问题。

4. 检查Webpack版本与目标环境配置 #

不同版本的Webpack对module字段的处理可能有细微差异，比如Webpack 5在某些特殊场景下的解析逻辑变化。另外，确认你的Webpacktarget不是node——针对Node.js环境的默认mainFields虽然包含module，但会更倾向于CommonJS模块，可能影响ES模块的优先级。

5. 确认是否存在条件导出干扰 #

Webpack 5支持package.json的exports字段做条件导出，如果库中有这个字段（vanilla-lazyload目前没有），可能会覆盖module字段的优先级。你可以检查resolve.conditions配置，确保包含module相关的解析条件。

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