Webpack 5：无需html-webpack-plugin，服务端模板引用带contenthash资源

问题背景 #

当使用copy-webpack-plugin并将to配置为'images/[name].[contenthash][ext]'时，如何在不依赖html-webpack-plugin或handlebars-loader的情况下，在服务端模板中引用这些带有内容哈希的文件？

你提出的解决方案 #

1. 自定义Webpack插件StoreAssetsInfoKeysPlugin #

/**
 * Create a new plugin class.
 */
const StoreAssetsInfoKeysPlugin = class StoreAssetsInfoKeysPlugin {
  /**
   * Define `apply` as its prototype method.
   * @param hooks
   */
  apply({ hooks }) {
    /**
     * Using the 'afterCompile' hook:
     * Use the 'assetsInfo' Map which contains the output of all asset paths,
     * construct an array containing all these paths,
     * then write an 'assets.json' file somewhere in your project.
     */
    hooks.afterCompile.tapAsync('StoreAssetsInfoKeysPlugin', ({ assetsInfo }, callback) => {
      fs.writeFileSync('/path/to/assets.json', JSON
        .stringify(Array
          .from(assetsInfo.entries())
          .map(([key]) => `/assets/${key}`)));

      callback();
    });
  }
};

2. Webpack配置示例 #

/**
 * The Webpack configuration for this
 * example looks like this.
 */
export default {
  plugins: [
    new StoreAssetsInfoKeysPlugin(),
    new CopyPlugin({
      patterns: [{
        from: '/path/to/images/*',
        to: 'images/[name].[contenthash][ext]',
      }],
    }),
  ],
};

3. 服务端辅助函数 #

/**
 * Create a helper function which will find the
 * correct path from the 'assets.json'
 */
export const getAssetPath = function getAssetPath(directory, filename, ext) {
  return JSON
    .parse(fs.readFileSync('/path/to/assets.json'))
    .find((value) => value
      .match(`^.*?\\b${directory}\\b.*?\\b${filename}\\b.*?\\.${ext}\\b.*?$`));
};

4. 服务端模板中使用 #

/**
 * Then use the helper function within your
 * server-side templating engine:
 */
getAssetPath('images', 'my-image', 'svg');

方案评价 #

你的方案整体思路可行，作为Webpack新手能想到通过自定义插件捕获编译后的资源信息并落地到JSON文件，再通过服务端读取匹配获取哈希文件名，这个方向是对的。以下是具体的优缺点和优化建议：

优点 #

• 核心逻辑清晰：利用Webpack的afterCompile钩子获取编译后的资源映射，这是获取最终资源路径的正确时机
• 满足无额外依赖要求：没有用到题目禁止的html-webpack-plugin或handlebars-loader，完全通过自定义逻辑实现需求

可优化点 #

1. 路径硬编码问题：插件和辅助函数中都使用了固定路径/path/to/assets.json，建议结合Webpack配置的output.path动态生成路径，避免环境切换时出现路径错误
2. assetsInfo前缀匹配问题：直接拼接/assets/${key}需要确保Webpack的publicPath和这个前缀一致，否则会导致资源路径错误
3. 正则匹配健壮性：当前正则中的\\b（单词边界）在文件名包含-、_等特殊字符时可能匹配失败，建议改用拆分路径后对比目录、文件名前缀和扩展名的方式，匹配更精准
4. 同步写入阻塞问题：插件中用fs.writeFileSync同步写入文件，资源较多时会阻塞编译进程，建议换成fs.writeFile异步写入，配合callback正确处理完成时机
5. 资源信息存储效率：当前只存储资源路径数组，建议改为存储原文件名到哈希路径的键值对（如{ "my-image.svg": "/assets/images/my-image.abcd123.svg" }），服务端查找时无需正则，直接键值对匹配效率更高

优化后的插件示例（参考） #

const fs = require('fs');
const path = require('path');

const StoreAssetsInfoKeysPlugin = class StoreAssetsInfoKeysPlugin {
  apply(compiler) {
    compiler.hooks.afterCompile.tapAsync('StoreAssetsInfoKeysPlugin', (compilation, callback) => {
      const assetsMap = {};
      // 遍历assetsInfo，构建原文件名到哈希路径的映射
      compilation.assetsInfo.forEach((info, outputPath) => {
        const originalFileName = path.basename(info.sourceFilename || outputPath);
        assetsMap[originalFileName] = `/assets/${outputPath}`;
      });
      
      const outputDir = compiler.options.output.path;
      const assetsPath = path.join(outputDir, 'assets.json');
      
      fs.writeFile(assetsPath, JSON.stringify(assetsMap), (err) => {
        if (err) console.error('Failed to write assets.json:', err);
        callback();
      });
    });
  }
};

优化后的辅助函数 #

import fs from 'fs';
import path from 'path';

export const getAssetPath = function getAssetPath(directory, filename, ext) {
  const assetsPath = path.join(process.cwd(), 'dist', 'assets.json'); // 动态路径
  const assetsMap = JSON.parse(fs.readFileSync(assetsPath));
  const originalKey = `${filename}.${ext}`;
  const fullPath = assetsMap[originalKey];
  return fullPath && fullPath.includes(`/${directory}/`) ? fullPath : null;
};

总的来说，你的初始方案已经解决了核心问题，针对上述细节优化后，能成为一个更健壮、可维护的实现。

内容的提问来源于stack exchange，提问作者d-rivers