До недавнего времени наша команда придерживалась привычки создавать разные репозитории 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, используемый для этого модуля, а имя файла — это выходной файл.