Создание пакетов в Webpack в папках, соответствующих исходным файлам

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

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 можно удалить.


webpack dynamic-loading preact
person Daneel Yaitskov    schedule 15.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person Filip Dupanović    schedule 15.06.2019