在 webpack 中，如何为多个入口点设置不同的输出目录？答案

【问题标题】：In webpack, how can I have different output directories for multiple entry points?在 webpack 中，如何为多个入口点设置不同的输出目录？
【发布时间】：2016-01-07 16:57:30
【问题描述】：

我有以下带有多个入口点的 webpack 配置...

module.exports = {
 entry: {
  somePage: "./scripts/someDir/somePage.js",
  anotherPage: "./scripts/someDir/someSubDir/anotherPage.js"
 },
 output: {
   path: path.resolve(__dirname, 'out'),
   filename: '[name].js'
 },
 ...

是否可以为每个条目设置不同的输出路径？

而不是得到...的输出

/out/somePage.js /out/anotherPage.js

我想要……

/out/someDir/somePage.js /out/someDir/someSubDir/anotherPage.js

对我来说理想的解决方案是让output.path 接受一个函数。比如……

...
output: {
   path: function (name, hash) {
       return path.resolve(__dirname, myMapOfFilenamesToDirs[name]);
   },
   filename: '[name].js'
},

有谁知道这是否可行，或者是否有现有的插件可以做到这一点？

编辑我不想使用多个配置条目（多编译器），因为我将无法再使用 CommonsChunkPlugin 在入口点之间创建共享文件

【问题讨论】：

您是否尝试在您的条目对象中重命名“someSubDir/anotherPage”中的另一个页面（使用"）？
我曾尝试将 path.resolve 中的第二个参数发送为 'build/[name]/'，结果发现 Webpack 无法编译。但下面的最佳答案真的很迷人。

标签： javascript webpack

【解决方案1】：

有点hacky，但这应该可以解决问题。

module.exports = {
 entry: {
  "somePage": "./scripts/someDir/somePage.js",
  "someSubDir/anotherPage": "./scripts/someDir/someSubDir/anotherPage.js"
 },
 output: {
   path: path.resolve(__dirname, 'out/someDir'),
   filename: '[name].js'
 },
 // Etc.
}

你不能设置函数的路径，webpack 不会为你调用它。

【讨论】：

是的，这是有道理的。很好的解决方案。
这真是天才！
哇，这绝对是天才！我对 webpack 感到沮丧，因为我没有让我将输出路径定义为函数（理想情况下是为了实现不同的输出路径）。这非常完美，我什至不确定是否称其为 hack。
对于像我一样想知道解决方案与问题有什么不同的人，他正在将条目文件名从文件名操作为具有所需路径的文件名。
最好的部分是，entry 需要一个函数，所以你甚至可以自动化这个而不是手动输入路径！

【解决方案2】：

您可以返回一组配置供 webpack 执行。我认为这将使您对输出路径有足够的控制权来实现您所需要的。

【讨论】：

这种方法的问题是我不能再使用 CommonsChunkPlugin 或带有 ExtractTextPlugin 的共享样式表在不同入口点之间创建共享包。您是否知道通过多个配置来完成此任务的某种方法？
@CharlieMartin 你可以做[name]/[name].js 但显然这不是你想要的。您可能需要自己修补 webpack 才能使其正常工作。
@bebraw 自己给 webpack 打补丁哈哈

【解决方案3】：

我今天遇到了同样的问题，补充了@quentin-roy，https://stackoverflow.com/a/33086806/6552940的答案

您还可以使用glob 和以下回调为输入文件创建输出路径映射。根据您的需要调整您的glob 模式。以下模式和回调（如果应用于目录结构）

- src
   - file01.ts
   lib
     - file02.ts

会导致

- dist
   - file01.js
   lib
     - file02.js

config = {
    entry: () => {
        const entries = {};
        glob.sync("./src/**/*.ts").forEach(filePath => {
            entries[
                path
                    .relative("./src", filePath)
                    .replace(path.extname(filePath), "")
            ] = filePath;
        });
        console.debug(
            `Entries created:\n${JSON.stringify(entries, undefined, 4)}`,
        );
        return entries;
    },
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist"),
    },
}

【讨论】：

【解决方案4】：

经过一些评估，我使用Webpack-watched-glob-entries-plugin 有一段时间了，因为它很小，可以满足我们的需要，并且还可以在手表模式下工作。

如果您需要更多想法，请查看此处Wildcards in entry points。

【讨论】：