Webpack Entry配置中自动匹配带哈希值的CSS/JS文件路径

方案1：用Node.js原生模块实现（无额外依赖） #

直接在Webpack配置文件中通过fs模块读取目标目录，配合正则筛选出符合格式的文件：

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

// 封装通用函数，获取指定目录下「前缀+哈希+后缀」格式的文件路径
function getHashedFilePath(dir, fileNamePrefix, fileExt) {
  const files = fs.readdirSync(dir);
  // 正则匹配规则：前缀.哈希.后缀，哈希仅包含字母数字
  const regex = new RegExp(`^${fileNamePrefix}\\.[a-zA-Z0-9]+\\.${fileExt}$`);
  const targetFile = files.find(file => regex.test(file));
  
  if (!targetFile) throw new Error(`未找到匹配的${fileNamePrefix}.[hash].${fileExt}文件`);
  return path.join(dir, targetFile);
}

// 在Webpack Entry中调用使用
module.exports = {
  entry: {
    appCss: {
      import: getHashedFilePath('./node_modules/project/testPackage/css/', 'app', 'css'),
      filename: './views/css/appWebpackCss.[contenthash].css',
    },
    appJs: {
      import: getHashedFilePath('./node_modules/project/testPackage/js/', 'app', 'js'),
      filename: './views/js/appWebpackJs.[contenthash].js',
    },
    vendorJs: {
      import: getHashedFilePath('./node_modules/project/testPackage/js/', 'vendor', 'js'),
      filename: './views/js/vendorWebpackJs.[contenthash].js',
    }
  },
  // 其他Webpack配置项...
};

方案2：用glob库简化匹配（推荐） #

如果觉得原生写法繁琐，可以用glob库的通配符语法快速匹配目标文件：

1. 先安装依赖：

npm install glob --save-dev

2. 在Webpack配置中使用：

const glob = require('glob');

// 封装通用匹配函数
function getHashedFilePath(pattern) {
  const files = glob.sync(pattern);
  if (files.length === 0) throw new Error(`未找到匹配${pattern}的文件`);
  // 确保仅匹配到一个目标文件（避免目录下存在多个同前缀的哈希文件）
  if (files.length > 1) throw new Error(`找到多个匹配${pattern}的文件，请检查目录`);
  return files[0];
}

module.exports = {
  entry: {
    appCss: {
      import: getHashedFilePath('./node_modules/project/testPackage/css/app.[a-zA-Z0-9]+.css'),
      filename: './views/css/appWebpackCss.[contenthash].css',
    },
    // 其他Entry项同理配置
  },
  // 其他Webpack配置项...
};

关于遍历开销的说明 #

你担心的遍历开销完全可以忽略——这类带哈希的输出目录通常只会包含少量文件（每个前缀对应唯一哈希文件），读取目录+匹配的操作耗时几乎可以忽略，不会影响Webpack构建效率。

针对10个项目的管理场景，你可以把上述匹配函数封装成独立工具模块，在各项目的Webpack配置中引入复用，进一步提升效率。

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