不能用 loader 实现该需求，因为 loader 仅做字符串转换，无法解析 JSX/模板语法、识别组件结构或安全操作 AST；真正可行的是 Babel 插件、自定义 Webpack Plugin 或封装 LazyImg 组件。
Webpack 中无法通过自定义 loader 在编译期“自动给所有图片组件添加 lazyload 属性”，因为 loader 只处理源码文本，不解析或操作 React/Vue 等框架的组件结构。所谓“图片组件”（如 <img> 或 <Image />）属于运行时 DOM 或虚拟 DOM 节点，loader 没有 AST 上下文、也不理解 JSX/模板语法，强行在 loader 里做字符串替换极易出错且不可靠。
为什么不能用 loader 实现这个需求
Loader 的本质是源码转换函数：输入字符串，输出字符串。它看不到组件树、不知道哪个 img 是动态渲染的、无法区分真实图片标签和注释/字符串/JSX 表达式里的伪标签。例如：
-
/* <img src="x.jpg"> */—— 不该处理 -
const tag = "<img src='x.jpg'>";—— 不该处理 -
<img {...props} />—— 无法安全插入loading="lazy" -
<Image src="x.jpg" />（自定义组件）—— loader 根本不认识这个组件
真正可行的方案：用自定义插件（Plugin）+ AST
需要在 Webpack 编译流程中接入 AST 分析，在 compilation.processAssets 阶段处理已生成的 JS/HTML 资源，或用 javascript/acorn 解析模块 AST，找到 JSXOpeningElement 中的 img 标签并注入属性。推荐使用 @babel/plugin-transform-react-jsx 配合自定义 Babel 插件：
- 在 Babel 插件中遍历
JSXOpeningElement，识别name.name === 'img' - 检查是否已有
loading属性，没有则插入loading: "lazy" - 对
<img src={...} />这类动态写法也生效 - 配合
babel-loader使用，天然支持 JSX/TSX
更简单稳健的做法：封装一个 LazyImg 组件
不依赖构建工具改造，从源头约束开发习惯：
- 定义统一的
<LazyImg src="..." alt="..." />组件 - 内部默认使用
loading="lazy"，并可集成 IntersectionObserver 做更精细控制 - 配合 ESLint 规则（如 react/no-img-element）禁止直接使用原生
<img> - 团队协作成本低，行为确定，兼容 SSR 和现代浏览器
如果坚持要在构建时注入，可用 HtmlWebpackPlugin + 自定义 HTML 模板处理
仅适用于静态 <img> 标签（非 JSX 渲染）：
- 在
html-webpack-plugin的template中写原生 HTML - 用其
htmlWebpackPlugin.tags或htmlWebpackPlugin.files钩子，结合cheerio修改最终 HTML 字符串 - 查找所有
<img>并追加loading="lazy" - 注意：仅影响 HTML 模板中的 img，不影响 JS 动态插入的图片
不复杂但容易忽略：构建期自动化注入属性这事，本质是权衡可维护性与可靠性。用 loader 硬改字符串就像用胶带修发动机——能跑两步，但没人敢上路。优先选组件封装 + Babel 插件，既精准又可持续。
