В 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

Ответы

Ответ 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.
}

Вы не можете установить путь к функции, веб-пакет не вызовет его для вас.

Ответ 2

Вы можете вернуть массив конфигураций для выполнения webpack. Я думаю, что это даст вам достаточно контроля над выходным путем для достижения того, что вам нужно.

Ответ 3

У меня была та же самая проблема сегодня, добавляя к ответу от @quentin-roy, fooobar.com/info/454878/...

Вы также можете создать сопоставления выходного пути для входных файлов, используя 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"),
    },
}