Webpack5+EJS构建中如何内联WebVitals polyfill至HTML头部

1. 自定义HtmlWebpackPlugin模板的思路是否正确？ #

完全正确。这种方式能直接掌控HTML结构与脚本注入的精确位置，完美匹配WebVitals官方要求的「polyfill内联在<head>标签之后」的规则，同时能通过Webpack构建流程自动同步polyfill版本，避免手动维护的版本不一致问题。

2. 如何解决代码注入问题？ #

方案一：自定义EJS模板直接读取并内联chunk #

步骤1：单独打包WebVitals Polyfill

在Webpack配置中，将polyfill作为独立入口打包，确保能精准识别：

// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
    webvitalsPolyfill: 'web-vitals/dist/polyfill.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    clean: true
  }
};

步骤2：修改EJS模板，在<head>后插入polyfill内容

利用HtmlWebpackPlugin暴露的htmlWebpackPlugin.files对象，匹配到polyfill的chunk文件，读取并内联：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>静态页面</title>
  <!-- 内联WebVitals Polyfill -->
  <% 
    const fs = require('fs');
    const path = require('path');
    htmlWebpackPlugin.files.js.forEach(file => {
      if (file.includes('webvitalsPolyfill')) {
        const filePath = path.resolve(__dirname, '../dist', file.split('/').pop());
        const polyfillCode = fs.readFileSync(filePath, 'utf8');
  %>
  <script><%= polyfillCode %></script>
  <% 
      }
    });
  %>
</head>
<body>
  <div id="app"></div>
  <!-- 加载其他业务脚本 -->
  <% htmlWebpackPlugin.files.js.forEach(file => {
    if (!file.includes('webvitalsPolyfill')) {
  %>
  <script src="<%= file %>"></script>
  <% 
    }
  });
  %>
</body>
</html>

步骤3：配置HtmlWebpackPlugin使用自定义模板

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

module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.ejs',
      filename: 'index.html'
    })
  ]
};

方案二：自定义Webpack插件（更通用） #

如果不想在模板中嵌入Node.js代码，可以通过自定义插件监听HtmlWebpackPlugin的钩子，自动插入polyfill：

步骤1：同上，先单独打包polyfill

步骤2：编写自定义插件

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

class InlineWebVitalsPolyfillPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('InlineWebVitalsPolyfillPlugin', (compilation) => {
      HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
        'InlineWebVitalsPolyfillPlugin',
        (htmlData, callback) => {
          // 定位polyfill chunk
          const polyfillChunk = compilation.chunks.find(chunk => chunk.name === 'webvitalsPolyfill');
          if (!polyfillChunk) {
            callback(null, htmlData);
            return;
          }

          const polyfillFilename = polyfillChunk.files[0];
          const polyfillPath = path.resolve(compiler.outputPath, polyfillFilename);
          const polyfillContent = fs.readFileSync(polyfillPath, 'utf8');

          // 插入到</head>之前
          htmlData.html = htmlData.html.replace('</head>', `<script>${polyfillContent}</script></head>`);
          // 移除原有的polyfill脚本引用
          htmlData.html = htmlData.html.replace(new RegExp(`<script src=".*${polyfillFilename}"></script>`, 'g'), '');

          callback(null, htmlData);
        }
      );
    });
  }
}

步骤3：在Webpack配置中注册插件

// webpack.config.js
module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.ejs',
      filename: 'index.html'
    }),
    new InlineWebVitalsPolyfillPlugin()
  ]
};

这两种方案都能解决「无法匹配目标脚本」和「无法注入代码」的问题，且都通过Webpack构建流程自动处理polyfill版本，避免手动维护的风险。

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