Webpack наблюдает за изменениями файлов и запускает загрузчик для других файлов

Question

Я ищу способ наблюдать за изменениями в файлах (в частности, sass-файлами) и запускать загрузчик для других файлов (js-файлов) с помощью веб-пакета.

Цель состоит в том, чтобы обнаружить изменения sass и перекомпилировать все файлы javascript с помощью babel-loader, поскольку они могут импортировать его через плагин styled-jsx.

Я застрял в концепции "загрузчика" и не могу понять, как получить другие файлы при тестировании на /.scss$/

Answer 1

Вам необходимо импортировать ваши файлы .scss в один из ваших файлов .js, чтобы веб-пакет фактически принял изменения.

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

Answer 2

Вам не нужно ничего делать самостоятельно, если вы используете модули scss с веб-пакетом (подробнее о концепции module в документации веб-пакета .

Что делает веб-пакет - он начинается в точке входа (вы можете указать одну или несколько точек входа, в противном случае будет использоваться значение по умолчанию src/index.js). А затем строит деревья зависимостей между модулями (которые могут иметь любое расширение файла, если есть определенный загрузчик, который может превратить файл в модуль). Затем Webpack просматривает все файлы и перестраивает все модули, которые зависят от измененного файла. Итак, если вы импортируете файл .scss, скажем, в вашу точку входа

import './styles.scss';
// ...

Он будет автоматически перестраиваться при изменении styles.scss 1011 *