html-webp-plugin

在构建阶段自动将 HTML 中的 <img> 标签转换为 <picture>，为支持 WebP 的浏览器提供更优的图片格式，同时保留原始格式作为降级方案。

安装

npm install html-webp-plugin --save-dev
# or
yarn add -D html-webp-plugin

使用

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpPlugin = require('html-webp-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({ /* ... */ }),
    new HtmlWebpPlugin({
      include: /\/img\//,
      exclude: null
    })
  ]
};

⚠️ 请确保在 HtmlWebpackPlugin 之后实例化本插件。

配置项

| 选项 | 说明 | 默认值 | | --- | --- | --- | | include | 需要转换的图片路径正则 | /\/img\// | | exclude | 需排除的图片路径正则 | null | | preserveAttributes | 是否保留原 <img> 的所有属性 | true |

处理流程

1. 在 HtmlWebpackPlugin 输出 HTML 前，将符合条件的 <img> 转换为 <picture>；
2. 在构建完成后校验 WebP 文件是否存在，缺失则自动回退为原 <img>；
3. 自动移除懒加载类名、data-src 等占位属性。

License

MIT © wangjun