如何将未创建文件设为Webpack配置的动态入口？

问题拆解 #

你的Webpack配置包含三个并行执行的子配置，但第三个配置的异步Entry逻辑存在三个核心问题：

1. 路径拼接错误：__dirname.split('\\')将路径拆分为数组，与字符串拼接时自动转为逗号分隔的字符串，生成了无效路径C:\Users\ar-IGT\Projects\bundles\,Users,ar-IGT,Projects,bundles\dist。
2. 未处理Promise异常：fs.promises.access失败时没有捕获异常，触发未处理的Promise拒绝警告。
3. 执行顺序冲突：Webpack多配置默认并行执行，第三个配置会在前两个配置生成dist目录前就尝试读取文件，必然报错。

分步修复 #

1. 修复路径生成逻辑 #

直接使用path.resolve生成跨平台合法路径，避免数组拆分拼接的错误：

// 替换原来的distDir生成逻辑
const distDir = path.resolve(__dirname, 'dist');

2. 捕获Promise异常 #

为异步操作添加错误处理，避免未处理的Promise拒绝：

const generateSingleBundleEntryFilePaths = async () => {
  const distDir = path.resolve(__dirname, 'dist');
  try {
    // 检查目录是否存在且可读写
    await fs.promises.access(distDir, fs.constants.R_OK | fs.constants.W_OK);
    // 读取目录文件，过滤出需要的.js和.html文件
    const files = await fs.promises.readdir(distDir);
    return files.filter(file => file.endsWith('.js') || file.endsWith('.html'))
                .map(file => path.join(distDir, file));
  } catch (err) {
    console.error('无法访问dist目录或目录不存在:', err);
    // 目录未就绪时返回空数组
    return [];
  }
};

3. 调整配置执行顺序 #

由于第三个配置依赖前两个的输出，必须让前两个配置先完成构建，再执行第三个。可以将配置导出为异步函数，控制执行顺序：

const webpack = require('webpack');

// 封装前两个配置的构建逻辑
const buildFirstTwoConfigs = async () => {
  return new Promise((resolve, reject) => {
    webpack([commonsAndVendorsConfig, multipleModulesConfig], (err, stats) => {
      if (err || stats.hasErrors()) {
        reject(err || stats.toString('errors-only'));
      } else {
        console.log('前两个配置构建完成');
        resolve();
      }
    });
  });
};

// 异步导出最终配置
module.exports = async () => {
  // 先完成前两个配置的构建
  await buildFirstTwoConfigs();
  // 再获取dist目录文件作为第三个配置的Entry
  const singleEntry = await generateSingleBundleEntryFilePaths();
  // 返回完整配置数组
  return [
    commonsAndVendorsConfig,
    multipleModulesConfig,
    { ...singleModuleConfig, entry: singleEntry }
  ];
};

4. 可选优化：拆分配置避免重复构建 #

如果不想重复构建前两个配置，可以将第三个配置单独拆分为独立的Webpack配置文件，分两次执行构建命令：

# 第一步：构建前两个配置
webpack --config webpack.config.js --env stage=first
# 第二步：构建第三个配置
webpack --config webpack.single.config.js

对应的主配置文件可根据环境变量控制导出内容：

module.exports = (env) => {
  if (env.stage === 'first') {
    return [commonsAndVendorsConfig, multipleModulesConfig];
  }
  return [];
};

修改后的核心代码片段 #

const generateSingleBundleEntryFilePaths = async () => {
  const distDir = path.resolve(__dirname, 'dist');
  try {
    await fs.promises.access(distDir, fs.constants.R_OK | fs.constants.W_OK);
    const files = await fs.promises.readdir(distDir);
    return files.filter(f => f.match(/\.(js|html)$/))
                .map(f => path.join(distDir, f));
  } catch (err) {
    console.error('dist目录未就绪:', err);
    return [];
  }
};

// 异步导出配置
module.exports = async () => {
  await new Promise((res, rej) => {
    webpack([commonsAndVendorsConfig, multipleModulesConfig], (err, stats) => {
      if (err || stats.hasErrors()) rej(err || stats);
      else res();
    });
  });
  
  const singleEntry = await generateSingleBundleEntryFilePaths();
  return [
    commonsAndVendorsConfig,
    multipleModulesConfig,
    { ...singleModuleConfig, entry: singleEntry }
  ];
};

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