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

Question

我有以下包含多个入口点的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）。

- Charlie Martin

---

你尝试过在入口对象中将“someSubDir/anotherPage”中的anotherPage（使用“"”）重命名吗？ - Quentin Roy

我曾尝试将path.resolve中的第二个参数设置为'build/[name]/'，结果Webpack无法编译。但下面最佳答案确实非常有效。 - GLPease

Answer 1

有点儿取巧，但应该会奏效。

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不会自动调用它。

- Quentin Roy

---

是的，这很有道理。非常好的解决方案。 - Juho Vepsäläinen

这太聪明了！ - Owen M

哇，这绝对是天才之举！我一直对webpack感到沮丧，因为它不允许我将输出路径定义为函数（理想情况下实现不同的输出路径）。这个解决方案非常完美，以至于我都不确定是否应该称其为技巧。 - Manjunath Satyamurthy

对于那些像我一样想知道解决方案与问题不同之处的人，他正在将条目文件名从仅文件名操作为带有所需路径的文件名。 - Manjunath Satyamurthy

最好的部分是，输入接受一个函数，因此您甚至可以自动化此过程，而不是手动输入路径！！ - Manjunath Satyamurthy

Answer 2

您可以返回webpack执行的配置数组。我认为这将为您提供足够的控制权，以实现您所需的输出路径。

- Juho Vepsäläinen

---

这种方法的问题在于，我不能再使用CommonsChunkPlugin或ExtractTextPlugin创建不同入口点之间的共享bundle或共享样式表。您是否知道如何使用多个配置实现此目标？ - Charlie Martin

@CharlieMartin 你可以使用[name]/[name].js，但显然这不是你想要的。很可能你需要自己修补webpack才能使其正常工作。 - Juho Vepsäläinen

@bebraw 自己修补Webpack 哈哈 - Green

Answer 3

经过一些评估，我已经使用Webpack-watched-glob-entries-plugin有一段时间了，因为它很小，做我们需要的事情，并且在监视模式下也可以工作。

如果您需要更多想法，请看这里入口点中的通配符。

- RiZKiT

Answer 4

今天我也遇到了同样的问题，补充一下@quentin-roy的答案，https://dev59.com/jFwY5IYBdhLWcg3wEEV2#33086806 您还可以使用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"),
    },
}

- user6552940