Webpack多站点项目如何自定义dist文件夹输出结构

你只需要修改output.filename配置，利用Webpack支持回调函数动态生成输出路径的特性即可实现需求，修改后的配置如下：

module.exports = {
    mode: "development",
    devtool: "source-map",
    entry: {
      home: [
        'XXX\src\main\resources\static\js\pages\home.js',
      ],
      home_site2: [
        'XXX\src\main\resources\static\js\pages\overrides\site2\home.js',
      ],
      home_site5: [
        'XXX\src\main\resources\static\js\pages\overrides\site5\home.js',
      ]
    },
    output: {
        // 核心修改：动态生成输出路径
        filename: (pathData) => {
            const chunkName = pathData.chunk.name;
            // 匹配站点重写入口的命名规则 [文件名]_[站点名]
            const siteEntryMatch = chunkName.match(/^(.+)_([^_]+)$/);
            if (siteEntryMatch) {
                const [, fileName, siteName] = siteEntryMatch;
                return `${siteName}/${fileName}.js`;
            }
            // 通用入口直接输出到dist根目录
            return `${chunkName}.js`;
        },
        path: resolvePath.dist,
        publicPath: resolvePath.publicPath
    }
}

实现效果 #

最终打包后的目录结构和你要求的完全一致：

• dist
  • home.js（所有站点通用默认文件）
  • site2
    • home.js
  • site5
    • home.js

补充说明 #

如果你的入口命名规则后续有调整，只需要修改正则匹配的逻辑，即可适配不同的目录生成规则。该配置同时会自动处理sourcemap文件的输出路径，不需要额外调整devtool相关配置。

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