Webpack配置：如何将编译产物输出到源码目录的同级dist目录

嘿，我来帮你搞定这个Webpack打包路径的问题！你现在遇到的情况是编译产物跑到src目录里了，而不是你想要的同级dist目录，这其实是因为entry生成的名称和output的路径规则没匹配好，咱们稍微调整下配置就能解决～

先分析下你当前的问题：你用glob拿到的每个入口名称是directory1/src/index.js，然后output.filename用[name]-dist.js，自然就会在src目录下生成index.js-dist.js，完全是路径规则没对齐导致的。下面给你两个可行的解决方案，选哪个都行：

方案一：调整Entry的键名（推荐） #

咱们把每个入口的键从directory1/src/index.js改成directory1这样的父目录名，然后在输出规则里明确指向dist目录，让Webpack直接把产物放到对应位置：

修改后的完整配置：

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

module.exports = ( env ) => {
    return {
        // 调整entry的键，只保留directory1、directory2这样的目录名
        entry: Object.fromEntries(
            glob.sync(path.resolve(__dirname, 'files/**/src/index.js')).map((v) => {
                // 从完整路径中提取目标目录名，比如从files/directory1/src/index.js拿到directory1
                const entryKey = v.replace(path.resolve(__dirname, 'files/'), '').replace('/src/index.js', '');
                return [entryKey, v];
            })
        ),
        resolve: {
            extensions: ['.js'],
        },
        output: {
            path: path.resolve( __dirname, 'files' ),
            // 用[name]指代directory1，指定输出到该目录下的dist文件夹里
            filename: '[name]/dist/index-dist.js',
        },
    }
};

方案二：用函数式Output Filename动态处理路径 #

如果不想改动入口的配置逻辑，也可以把output.filename改成函数，直接对每个入口的路径做字符串替换，把src/的部分换成dist/：

修改后的完整配置：

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

module.exports = ( env ) => {
    return {
        entry: Object.fromEntries(glob.sync(path.resolve(__dirname, 'files/**/src/index.js')).map((v) => [ v.split('files/')[1], v, ] )),
        resolve: {
            extensions: ['.js'],
        },
        output: {
            path: path.resolve( __dirname, 'files' ),
            // 动态替换路径：把入口名称里的src/index.js换成dist/index-dist.js
            filename: (pathData) => {
                const originalEntryPath = pathData.chunk.name; // 比如directory1/src/index.js
                return originalEntryPath.replace('src/index.js', 'dist/index-dist.js');
            },
        },
    }
};

最终效果验证 #

不管用哪个方案，打包后的项目结构都会完全符合你的预期：

- files/
  - directory1/
    - src/
      - index.js
    - dist/
      - index-dist.js
  - directory2/
    - src/
      - index.js
    - dist/
      - index-dist.js

对了，你之前试的[path]变量没生效，是因为当时的入口名称已经包含了完整的src/路径，Webpack直接把[path]解析成了那部分路径，反而帮倒忙。现在调整后路径逻辑就清晰啦！

备注：内容来源于stack exchange，提问作者allicarn