До недавнего времени наша команда придерживалась привычки создавать разные репозитории git для каждого проекта. Это казалось естественным, поскольку у них были бы отдельные циклы выпуска, другой набор зависимостей и т. д. Проблема, которую я и моя команда начали ощущать при таком подходе, заключается в том, что количество отдельных, но связанных между собой приложений и сервисов, которые мы создаем, растет. , это становится запутанным процессом разработки. Даже небольшие потоки требовали одновременного открытия и прикосновения к нескольким проектам. Это стало достаточно большой проблемой, поэтому мы решили сжать ее в один репозиторий git. Для наших веб-проектов мы использовали пакеты веб-пакетов, поэтому я поделюсь нашим подходом к этому.

Webpack чрезвычайно упрощает управление несколькими артефактами из одной сборки. В Webpack каждый артефакт сборки называется пакетом. В большинстве проектов используется только один пакет, называемый основным (по соглашению), но несколько пакетов можно легко определить с помощью конфигурации объекта entry в конфигурации веб-пакета, как это дополнительно описано здесь: https://webpack.js.org/concepts. /точки входа/»

В качестве примера предположим, что я хочу собрать 2 бандла: webapp и anotherApp. Вот как я бы определил свою конфигурацию входа:

entry: {
  webapp: './src/webapp/index.js',
  anotherApp: './src/anotherapp/index.js'
}

Каждая точка входа будет генерировать отдельный граф зависимостей на основе импорта в указанном файле javascript.

Для каждого входного файла будет создан отдельный выходной файл пакета. Измените конфигурацию output, чтобы она была шаблоном файла, а не статическим именем файла:

output: {
  filename: '[name].js'
}

Часть [name] заменяется именем модуля, указанным в конфигурации entry.

Создание HTML для каждого пакета

По умолчанию HtmlWebpackPlugin автоматически создает один файл index.html и внедряет в него ваш основной пакет. Чтобы заставить его работать с несколькими пакетами, нам нужно предпринять следующие шаги:

  • Отключить автоматическое внедрение пакета в HTML
  • Создавайте отдельные HTML-файлы
  • Внедряйте каждый пакет в отдельные HTML-файлы

Создайте 2 отдельных файла .html, которые будут использоваться в качестве шаблонов для каждого пакета. На каждом из них добавьте соответствующие пакеты javascript:

<script type="text/javascript" src="webapp.js"></script>

и

<script type=”text/javascript” src="anotherApp.js"></script>

Внутри конфигурации веб-пакета plugin[] создайте несколько объектов конфигурации HtmlWebpackPlugin для каждой записи:

new HtmlWebpackPlugin({
  title: 'WebApp',
  template: './src/webapp.html',
  filename: './dist/webApp/index.html`
  inject: false
}),
new HtmlWebpackPlugin({
  title: 'AnotherApp',
  template: './src/anotherApp.html',
  filename: './dist/anotherApp/index.html',
  inject:false
})

Свойство шаблона должно указывать на шаблон HTML, используемый для этого модуля, а имя файла — это выходной файл.