如何在开发环境下将指定脚本优先插入dist目录中HTML文件的头部？

嘿，这个需求其实很好解决，我给你分两种常用前端构建工具的方案来说，你看哪种适配你的项目～

Webpack 方案 #

如果你用的是 Webpack，咱们可以借助 html-webpack-plugin 来实现脚本的优先插入：

1. 先确保安装了这个插件（没装的话执行下面的命令）：

npm install html-webpack-plugin --save-dev

2. 修改你的 webpack.config.js 配置文件，针对 popup.html 和 options.html 分别配置插件，利用钩子把脚本插入到 <head> 的最开头：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他项目配置...
  plugins: [
    // 处理 popup.html
    new HtmlWebpackPlugin({
      template: './src/popup.html', // 你的源HTML文件路径
      filename: 'popup.html', // 输出到dist的文件名
      inject: 'head', // 保证脚本注入到head区域
      beforeHtmlProcessing: (htmlPluginData) => {
        // 只在开发环境插入这个脚本
        if (process.env.NODE_ENV === 'development') {
          const devScript = '<script src="http://localhost:8097"></script>';
          // 把脚本插入到<head>标签的开头位置
          htmlPluginData.html = htmlPluginData.html.replace(
            /<head>/i,
            `<head>${devScript}`
          );
        }
        return htmlPluginData;
      }
    }),
    // 同样处理 options.html
    new HtmlWebpackPlugin({
      template: './src/options.html',
      filename: 'options.html',
      inject: 'head',
      beforeHtmlProcessing: (htmlPluginData) => {
        if (process.env.NODE_ENV === 'development') {
          const devScript = '<script src="http://localhost:8097"></script>';
          htmlPluginData.html = htmlPluginData.html.replace(
            /<head>/i,
            `<head>${devScript}`
          );
        }
        return htmlPluginData;
      }
    })
  ]
};

这样配置后，开发环境编译时，dist目录里的两个HTML文件中，你要的脚本会成为<head>里的第一个脚本，比Webpack自动注入的其他脚本都靠前。

Vite 方案 #

如果你的项目用的是 Vite，咱们可以自定义一个插件来处理HTML：

修改你的 vite.config.js 文件，添加一个自定义插件：

export default {
  plugins: [
    {
      name: 'inject-dev-script',
      transformIndexHtml(html, { filename }) {
        // 只在开发环境，且目标是popup.html/options.html时插入脚本
        if (process.env.NODE_ENV === 'development' && 
            (filename.includes('popup.html') || filename.includes('options.html'))) {
          const devScript = '<script src="http://localhost:8097"></script>';
          return html.replace(/<head>/i, `<head>${devScript}`);
        }
        return html;
      }
    }
  ]
};

这个自定义插件会在Vite处理HTML时，自动把指定脚本插入到对应文件的<head>最开头，完全符合你的需求。

备注：内容来源于stack exchange，提问作者Samuel