如何配置WebPack动态输出目录 实现动态入口文件按路径编译输出

你现有配置存在两个核心问题导致动态入口输出不符合预期：

• 将glob匹配到的所有frontend.js文件全部挂载到frontend单个entry键下，webpack会将这些文件合并打包为一个文件，无法实现单文件单独编译
• 固定写死的output.path和filename规则，不支持不同入口输出到不同目录的需求

修改后可直接运行的完整配置 #

const path = require('path');
const glob = require('glob');
const rootDir = __dirname;
const fixedOutputDir = path.resolve(rootDir, 'prod');

// 初始化固定入口
const entryConfig = {
  app: path.resolve(rootDir, './src/js/app.js'),
  blocks: path.resolve(rootDir, './gutenberg/blocks.js'),
  react: path.resolve(rootDir, './src/js/app-react.js'),
};

// 动态生成block frontend独立入口
const blockFrontendFiles = glob.sync(
  path.resolve(rootDir, './gutenberg/blocks/**/frontend.js')
);
blockFrontendFiles.forEach((fileFullPath) => {
  // 获取文件所在目录的相对路径，作为entry的唯一标识
  const fileRelativeDir = path.relative(rootDir, path.dirname(fileFullPath));
  entryConfig[`${fileRelativeDir}/frontend`] = fileFullPath;
});

module.exports = {
  mode: 'development',
  entry: entryConfig,
  // 删除原配置中重复声明的devtool，仅保留一份
  devtool: 'source-map',
  output: {
    // 输出根路径设为项目根目录，兼容多目录输出需求
    path: rootDir,
    filename: (pathData) => {
      const entryKey = pathData.chunk.name;
      // 固定三个入口走原有输出逻辑，输出到prod目录
      if (['app', 'blocks', 'react'].includes(entryKey)) {
        return path.relative(rootDir, fixedOutputDir) + '/[name].min.js';
      }
      // 动态block入口输出到原文件所在目录
      return `${entryKey}.min.js`;
    },
    // 关闭自动清理，避免误删非prod目录的项目文件
    clean: false
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.js$/,
        use: ['source-map-loader'],
        enforce: 'pre',
      },
    ],
  },
};

配置效果 #

• 原有三个固定入口的编译输出逻辑完全不变，产物生成在rootDir/prod/目录下，文件名保持[name].min.js格式
• 每个block目录下的frontend.js会被独立编译，产物直接生成在对应rootDir/gutenberg/blocks/[blockNameDir]/目录下，文件名为frontend.min.js
• 支持任意层级嵌套的block目录匹配，不需要修改路径解析逻辑

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