如何同步Webpack插件执行顺序，正确引用带哈希的图片？

你遇到的核心问题是WebpackManifestPlugin生成manifest的时机晚于HtmlWebpackPlugin处理模板的时机，同时直接在配置里require manifest是在Webpack启动时执行，而非构建阶段，导致读取的是旧文件或不存在的文件。以下是两个可行的解决方案：

方案一：用HtmlWebpackPlugin模板函数动态读取manifest #

这种方式无需额外钩子，直接利用HtmlWebpackPlugin的模板参数能力，在模板渲染时读取已生成的manifest：

1. 修改Webpack配置 #

const WebpackManifestPlugin = require('webpack-manifest-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const fs = require('fs');
const ejs = require('ejs');

module.exports = {
  // 其他基础配置（entry、output等）
  plugins: [
    // 先执行CopyWebpackPlugin复制图片并添加哈希
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets/img'),
          to: 'assets/img/[name].[contenthash:8].[ext]', // 输出带哈希的文件名
        },
      ],
    }),
    // 生成manifest，指定输出路径
    new WebpackManifestPlugin({
      filename: 'assets/img/manifest.json',
      publicPath: '/', // 匹配你的静态资源公共路径
      basePath: '', // 根据output目录调整，空值表示基于dist根目录
    }),
    // 用模板函数替代直接指定ejs文件
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: (templateParams, compilation) => {
        // 从compilation资源中获取manifest内容（避免读取磁盘文件）
        const manifestAsset = compilation.assets['assets/img/manifest.json'];
        if (!manifestAsset) throw new Error('Manifest未生成，请检查插件配置');
        
        const manifest = JSON.parse(manifestAsset.source());
        // 读取原始ejs模板
        const templateContent = fs.readFileSync(path.resolve(__dirname, 'src/index.ejs'), 'utf8');
        // 把manifest传入模板，渲染出最终HTML
        return ejs.render(templateContent, { ...templateParams, manifest });
      },
    }),
  ],
};

2. 修改index.ejs模板 #

将原来的固定图片路径改为通过manifest映射：

<!-- 原来的写法 -->
<!-- <img src="./assets/img/avatar.jpg" alt="头像"> -->

<!-- 修改后的写法 -->
<img src="<%= manifest['avatar.jpg'] %>" alt="头像">

方案二：用Webpack钩子手动控制插件执行顺序 #

如果偏好传统的模板文件方式，可以通过自定义插件的afterProcessAssets钩子（Webpack 5+支持），确保manifest生成后再触发HtmlWebpackPlugin的模板渲染：

修改Webpack配置 #

const WebpackManifestPlugin = require('webpack-manifest-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const fs = require('fs');

module.exports = {
  // 其他基础配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets/img'),
          to: 'assets/img/[name].[contenthash:8].[ext]',
        },
      ],
    }),
    new WebpackManifestPlugin({
      filename: 'assets/img/manifest.json',
      publicPath: '/',
      basePath: '',
    }),
    // 先初始化HtmlWebpackPlugin但禁用自动渲染
    new HtmlWebpackPlugin({
      template: 'src/index.ejs',
      filename: 'index.html',
      inject: false,
    }),
    // 自定义插件控制执行顺序
    {
      apply: (compiler) => {
        // afterProcessAssets钩子：所有资源处理完成后触发（此时manifest已生成）
        compiler.hooks.afterProcessAssets.tap('SyncManifestAndHtml', (compilation) => {
          const manifestPath = path.resolve(compiler.outputPath, 'assets/img/manifest.json');
          const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
          
          // 找到HtmlWebpackPlugin实例，修改模板参数传入manifest
          const htmlPlugin = compilation.options.plugins.find(p => p instanceof HtmlWebpackPlugin);
          if (!htmlPlugin) return;
          
          htmlPlugin.userOptions.templateParameters = (params) => ({ ...params, manifest });
          // 手动触发HtmlWebpackPlugin的渲染逻辑
          htmlPlugin.apply(compiler);
        });
      },
    },
  ],
};

模板修改和方案一一致，用<%= manifest['xxx.jpg'] %>引用图片。

核心注意事项 #

• 禁止在Webpack配置顶部直接require manifest：配置文件加载时，manifest还未生成，读取的是旧文件或空值，必须在构建阶段（钩子/模板函数）读取。
• 路径一致性：确保CopyWebpackPlugin的输出路径、WebpackManifestPlugin的publicPath/basePath，与HTML中引用的路径完全匹配。
• 钩子时机选择：afterProcessAssets是Webpack 5的推荐钩子，比done早（done是构建完成后触发，此时HTML已经生成，所以你之前用done无效）。

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