Генерация пакетов в Webpack в папках, соответствующих исходным файлам

Question

Я использую веб-пакет с preact-async-router, который позволяет разбивать и загружать кодовую базу в пакеты.Работает хорошо, но пачки расположены в 1 папке и имеют плоскую структуру.Я ожидаю проблем с производительностью для большого количества пакетов.

await import("app/module/page")

По умолчанию preact-async-router загружает пакеты с соответствующего пути.Т.е. если src / a / b / c.tsx, тогда http get /a/b/bundle.11.js.Я использую обходной путь publicPath: "/" для этого, и любой путь заменяется пустой строкой, но это не решает проблему с большой папкой в ​​комплекте.

  output: {
    filename: "./bundle.js",
    publicPath: "/"
  },

Я пытался поиграть с именами файлов и ключами путейдля них функции генерируют динамический выходной путь, но он не работает.Функция вызывается только один раз, потому что там 1 входной файл.Файлы вложенных комплектов не могут использоваться в качестве точек входа (для перезагрузки страницы я использую правила перезаписи для загрузки index.html, если путь указывает на 404).

В скобках нет подходящей переменной, содержащей путь к исходному файлу.

Так что, если есть способ оценить функцию имени файла для каждого файла, publicPath может быть удален.

Answer 1

Возможно, вы захотите обратиться к SplitChunksPlugin, в котором есть сведения о том, как настроить optimization.splitChunks для управления чанками.

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

Примечание: хотя можно настроить выходной каталог так, чтобы он находился в вашем исходном каталогетехнически вы всегда должны иметь возможность настроить выходной путь снаружи (поскольку publicPath и outputPath независимы).Вы можете использовать copy-webpack-plugin для перемещения статических источников на выходы.

Это имеет некоторые преимущества, в частности, упрощает настройку шаблонов игнорирования VCS, а также позволяет использовать clean-webpack-plugin, чтобы гарантировать, что вы не обращаетесь к устаревшим/ хранение бесхозных активов.