如何在Webpack中从JS模块提取含处理后图片URL的JSON？

问题背景 #

我有一个包含数据集列表的JavaScript文件，每个数据集都附带图片引用，代码示例如下：

const placeholderThumb = new URL("images/placeholder.png?width=450?as=webp", import.meta.url)
const placeholder = new URL("images/placeholder.png?width=450?as=webp", import.meta.url)
export default [{
  "id": "universum",
  // ...其他字段
  "thumbnail": new URL("images/universum.jpg?width=450&as=webp", import.meta.url),
  "images": [
    new URL("images/universum.jpg?width=750&as=webp", import.meta.url)
  ]
 }, {
  "id": "studcad",
  // ...其他字段
  "thumbnail": placeholderThumb,
  "images": [
    placeholder
   ]
 },
// ...更多数据集
]

目前使用ImageMinimizerPlugin作为图片压缩工具，通过常规JS import引入模块时运行正常。希望Webpack将该数据集序列化为额外的JSON文件，包含经ImageMinimizerPlugin解析后的图片URL，供其他系统处理。

实现方案 #

可以通过自定义Webpack插件结合Webpack的资源处理能力实现需求，核心思路是在Webpack编译完成后，提取处理后的数据集并将其转换为JSON文件输出。

步骤1：确保图片资源被正确处理 #

在Webpack配置中配置asset/resource规则，让Webpack接管图片资源的处理，同时保证ImageMinimizerPlugin能正常压缩图片：

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  // ...其他配置（入口、输出路径等）
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|webp)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]' // 输出的图片命名规则
        }
      }
    ]
  },
  plugins: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            ['imagemin-webp', { quality: 80 }],
            ['imagemin-mozjpeg', { quality: 80 }]
            // 根据需要添加其他压缩插件
          ]
        }
      }
    })
  ]
};

步骤2：添加自定义插件生成JSON文件 #

编写一个Webpack自定义插件，在编译的emit阶段（资源即将输出到目录时），提取处理后的数据集，将其中的URL对象转换为最终的资源路径，再序列化为JSON文件：

const path = require('path');

// 自定义插件类
class GenerateDatasetJsonPlugin {
  apply(compiler) {
    // 在emit阶段触发，此时所有资源已处理完成
    compiler.hooks.emit.tapAsync('GenerateDatasetJsonPlugin', (compilation, callback) => {
      // 加载数据集模块（Webpack已处理其中的URL引用）
      const rawDataset = require(path.resolve(__dirname, 'src/datasets.js')).default;
      
      // 转换URL对象为最终的资源路径字符串
      const processedDataset = rawDataset.map(item => ({
        ...item,
        thumbnail: item.thumbnail.href,
        images: item.images.map(img => img.href)
      }));

      // 序列化为格式化的JSON
      const jsonContent = JSON.stringify(processedDataset, null, 2);
      
      // 将JSON文件添加到输出资源中
      compilation.assets['datasets.json'] = {
        source: () => jsonContent,
        size: () => jsonContent.length
      };

      callback();
    });
  }
}

// 在Webpack配置的plugins数组中添加该插件
module.exports = {
  // ...其他配置
  plugins: [
    new ImageMinimizerPlugin(/* ...已有的压缩配置... */),
    new GenerateDatasetJsonPlugin()
  ]
};

步骤3：验证输出 #

运行Webpack编译后，dist目录下会生成datasets.json文件，其中的thumbnail和images字段已替换为经过压缩后的最终图片URL，可直接供其他系统读取使用。

注意事项 #

• 如果数据集文件使用ES模块语法（如export default），在插件中需要通过.default获取导出的数据集对象。
• 若数据集包含复杂的JS逻辑，需确保在插件加载模块时能正确执行并获取最终数据。
• 可根据需求调整JSON文件的输出路径和文件名，修改compilation.assets中的键名即可。

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