如何通过Webpack基于文件夹动态单独输出JavaScript文件？

完全可以用Node.js的文件系统API实现动态识别，不需要手动修改配置。核心思路是遍历目标目录生成Webpack的entry配置，配合output的动态文件名实现自动输出。

基础实现（仅处理一级目录文件） #

直接读取src/js/modules下的所有.js文件，动态生成entry对象：

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

// 模块目录的绝对路径
const modulesDir = path.resolve(__dirname, 'src/js/modules');

// 遍历目录生成entry配置
const entry = fs.readdirSync(modulesDir).reduce((entryObj, fileName) => {
  // 只处理.js后缀的文件
  if (path.extname(fileName) === '.js') {
    // 用文件名（不含后缀）作为entry的key
    const entryKey = path.basename(fileName, '.js');
    entryObj[entryKey] = path.resolve(modulesDir, fileName);
  }
  return entryObj;
}, {});

module.exports = {
  entry,
  output: {
    // 输出到dist/modules目录
    path: path.resolve(__dirname, 'dist/modules'),
    // 用entry的key作为输出文件名，保持原文件名不变
    filename: '[name].js',
    clean: true // 可选：每次构建清空输出目录
  },
  // 你的其他Webpack配置（mode、loader、plugins等）
  mode: 'production',
  // ...
};

进阶实现（支持子目录递归） #

如果modules目录下有子层级目录，需要递归遍历所有.js文件：

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

const modulesDir = path.resolve(__dirname, 'src/js/modules');

// 递归遍历目录生成entry的工具函数
function generateEntries(targetDir, relativePath = '') {
  const entries = {};
  const files = fs.readdirSync(targetDir, { withFileTypes: true });

  files.forEach(file => {
    const fullFilePath = path.resolve(targetDir, file.name);
    const currentRelativePath = path.join(relativePath, file.name);

    if (file.isDirectory()) {
      // 递归处理子目录
      Object.assign(entries, generateEntries(fullFilePath, currentRelativePath));
    } else if (path.extname(file.name) === '.js') {
      // 用相对路径的文件名（不含后缀）作为entry的key，避免重名
      const entryKey = path.basename(currentRelativePath, '.js');
      entries[entryKey] = fullFilePath;
    }
  });

  return entries;
}

const entry = generateEntries(modulesDir);

module.exports = {
  entry,
  output: {
    path: path.resolve(__dirname, 'dist/modules'),
    filename: '[name].js',
    clean: true
  },
  mode: 'production',
  // ...其他配置
};

效果说明 #

• 新增或删除src/js/modules（及子目录）下的.js文件时，无需修改Webpack配置，构建时会自动识别
• 输出文件会保持原文件的命名（子目录下的文件会用相对路径的文件名作为输出名，避免重名），直接输出到dist/modules目录

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