在 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'
},

有谁知道这是否可行，或者是否有可以完成此操作的现有插件？

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

Answer 1

您可以 return 一系列配置供 webpack 执行。我认为这会给你足够的控制输出路径来实现你需要的。

Answer 2

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

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 不会为您调用它。

Answer 3

我今天遇到了同样的问题，加上@quentin-roy 的回答，

您还可以使用 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"),
    },
}

Answer 4

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

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

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

In webpack, how can I have different output directories for multiple entry points?

javascript

webpack