如何在index.html中加载匹配main.*.css与main.*.js模式的所有文件？

嘿，要在index.html里自动加载所有main.*.css和main.*.js这类带后缀的文件（比如常见的哈希版本资源，像main.abc.css、main.6788.js），我给你整理了几种实用方案，看哪种适合你的项目：

1. 用构建工具自动生成引用（最推荐） #

如果你的项目用Webpack、Vite、Rollup这类现代构建工具，它们自带的能力就能完美解决这个问题，而且是最可靠的方式：

• Webpack：借助html-webpack-plugin插件，它会自动把打包后带哈希的CSS/JS文件注入到你的index.html中，完全不需要手动写通配符。简单配置示例：

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

module.exports = {
  // 其他Webpack配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 你的源HTML模板
      filename: 'index.html' // 输出的HTML文件名
    })
  ]
};

• Vite：Vite默认就支持这个功能，你只需要在项目根目录的index.html里正常引用入口JS文件，构建时Vite会自动替换成带哈希的资源，同时把关联的CSS也自动注入进去。

2. 纯前端动态加载方案 #

如果没法用构建工具，也可以用JavaScript动态创建标签来加载匹配的文件，但这里分两种情况：

情况A：已知所有匹配的文件名 #

如果你能提前拿到所有符合模式的文件名（比如从后端接口获取，或者构建时生成的清单文件），可以直接循环生成标签：

// 假设你已经拿到了匹配的文件列表
const cssFiles = ['main.abc.css', 'main.788.css'];
const jsFiles = ['main.abc.js', 'main.6788.js'];

// 加载CSS文件
cssFiles.forEach(file => {
  const linkTag = document.createElement('link');
  linkTag.rel = 'stylesheet';
  linkTag.href = `https://abc.xyz.com/static/css/${file}`;
  document.head.appendChild(linkTag);
});

// 加载JS文件
jsFiles.forEach(file => {
  const scriptTag = document.createElement('script');
  scriptTag.src = `https://abc.xyz.com/static/js/${file}`;
  // 可选：设置加载顺序或异步属性
  // scriptTag.async = true;
  document.body.appendChild(scriptTag);
});

情况B：尝试猜测哈希格式（不推荐） #

如果不知道具体的文件名，硬猜哈希格式是很不可靠的——哈希长度、格式都可能变化，还会产生大量无效请求拖慢页面。除非是特殊场景，否则不建议这么做，比如：

// 示例：尝试3位数字哈希的CSS，仅作演示，别在生产环境用！
for (let i = 0; i < 1000; i++) {
  const hash = i.toString().padStart(3, '0');
  const linkTag = document.createElement('link');
  linkTag.rel = 'stylesheet';
  linkTag.href = `https://abc.xyz.com/static/css/main.${hash}.css`;
  // 请求失败就移除标签，避免占用资源
  linkTag.onerror = () => linkTag.remove();
  document.head.appendChild(linkTag);
}

3. 服务器端动态生成HTML #

如果你的index.html是由服务器端渲染生成的（比如Node.js、PHP项目），可以在服务器端读取静态资源目录，筛选出符合模式的文件，再动态生成对应的标签。

举个Node.js（Express）的例子：

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

app.get('/', (req, res) => {
  // 读取CSS目录，筛选匹配main.*.css的文件
  const cssDir = path.join(__dirname, 'static/css');
  const cssFiles = fs.readdirSync(cssDir).filter(file => /^main\..*\.css$/.test(file));
  
  // 读取JS目录，筛选匹配main.*.js的文件
  const jsDir = path.join(__dirname, 'static/js');
  const jsFiles = fs.readdirSync(jsDir).filter(file => /^main\..*\.js$/.test(file));
  
  // 拼接HTML内容
  const htmlContent = `
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    ${cssFiles.map(file => `<link href="/static/css/${file}" rel="stylesheet">`).join('\n    ')}
  </head>
  <body>
    ${jsFiles.map(file => `<script src="/static/js/${file}"></script>`).join('\n    ')}
  </body>
  </html>
  `;
  
  res.send(htmlContent);
});

app.listen(3000, () => console.log('Server running on port 3000'));

内容的提问来源于stack exchange，提问作者Atul kumar singh