Webpack watch() с несколькими точками ввода - испускание пакетов для неизменяемых файлов?

В моем webpack.config.js у меня есть 3 отдельных точки входа, одна для пакета JS, одна для основного пакета SCSS и одна для отдельного пакета SCSS, который не имеет отношения к основному набору SCSS.

Когда я использую API webpack.watch(), по какой-либо причине редактирование, скажем, исходных файлов JS, вызывает перекомпиляцию не только пакета JS, но и 2 пакета SCSS. Почему это и как я могу остановить это поведение и убедиться, что только отредактированная точка входа перекомпилирована?

Причина, по которой это проблема, заключается в том, что я использую browserersync, а для пакета CSS перекомпилирует im, просто вставляя CSS вместо перезагрузки, но в HTML/JS редактирует его перезагрузку. Однако, если я отредактирую SCSS, и он также перекомпилирует JS/HTML browsersync, запускает перезагрузку вместо добавления CSS

ОТВЕТЫ

Ответ 1

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

Для этого вы можете использовать файл манифест, предоставленный commonsChunkPlugin:

Например, если у вас есть следующие точки входа:

entry: {
   app: 'main.js', // main entry point
   vendor: ['jquery', 'react'] //Third libraries
}

Вы можете использовать плагин CommonsChunkPlugin:

new wepack.optimize.CommonsChunkPlugin({
  name: ['vendor', 'manifest']
})

Эта конфигурация генерирует файл манифеста как другой вывод. В этом случае, если вы внесете изменения в свою точку входа "приложение", веб-пакет только собирается перекомпилировать пакет вывода main.js(в соответствии с форматом "filename" в конфигурации "output" ), поскольку пакет поставщиков уже является то же самое.

Вы можете попробовать это со своими точками входа.