Webpack 5及以上版本中，替代preload-webpack-plugin的方案有哪些？

方案一：利用 html-webpack-plugin 自定义模板手动添加预加载标签 #

html-webpack-plugin 完全兼容 Webpack 5，你可以通过自定义 HTML 模板，遍历打包后的图片资源并生成 <link rel="preload"> 标签。

1. 配置 html-webpack-plugin 时指定自定义模板：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 自定义模板路径
      filename: 'index.html'
    })
  ]
};

2. 在自定义模板中使用模板语法处理图片资源：

<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>预加载示例</title>
  <!-- 遍历图片资源生成preload标签 -->
  <% for (let asset of htmlWebpackPlugin.files.js.concat(htmlWebpackPlugin.files.css)) { %>
    <% if (asset.match(/\.(png|jpe?g|gif|svg)$/)) { %>
      <link rel="preload" href="<%= asset %>" as="image">
    <% } %>
  <% } %>
</head>
<body>
  <div id="app"></div>
</body>
</html>

方案二：使用 Webpack 5 原生预加载语法 + html-webpack-plugin #

Webpack 5 支持通过魔法注释标记资源预加载，结合 html-webpack-plugin 可自动将预加载资源注入到 HTML 中。

1. 在业务代码中标记需要预加载的图片：

// 业务代码文件
import(/* webpackPreload: true */ './assets/hero-image.jpg');

2. 确保 html-webpack-plugin 配置正常，它会自动识别带有 webpackPreload 标记的资源，并在 HTML 的 <head> 中插入对应的预加载标签。

方案三：编写简易自定义 Webpack 插件 #

如果上述方案无法满足需求，可以自己写一个轻量插件，遍历打包后的图片资源，向 html-webpack-plugin 生成的 HTML 中插入预加载标签。

// webpack.config.js
class ImagePreloadPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ImagePreloadPlugin', (compilation) => {
      // 监听html-webpack-plugin的模板处理钩子
      const hooks = require('html-webpack-plugin').getHooks(compilation);
      hooks.beforeAssetTagGeneration.tapAsync(
        'ImagePreloadPlugin',
        (data, cb) => {
          // 筛选图片资源
          const imageAssets = data.assets.js.concat(data.assets.css).filter(asset => 
            /\.(png|jpe?g|gif|svg)$/.test(asset)
          );
          // 添加preload标签到head资源列表
          data.assets.headTags = [
            ...imageAssets.map(asset => ({
              tagName: 'link',
              attributes: {
                rel: 'preload',
                href: asset,
                as: 'image'
              },
              voidTag: true
            })),
            ...data.assets.headTags
          ];
          cb(null, data);
        }
      );
    });
  }
}

module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin(),
    new ImagePreloadPlugin()
  ]
};

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