# Лоадеры в Webpack

Для расширения возможностей Webpack также используются лоадеры. Они позволяют брать файлы определенного типа и производить с ними определенные операции.

Например, можно взять все файлы с расширением `.less`, преобразовать их текст в CSS, затем полученный CSS минимизировать и сохранить в один общий файл.

Давайте посмотрим общую схему работы с лоадером на примере двух воображаемых лоадеров.

Давайте установим первый лоадер:

`npm install test-loader1 --save-dev`

Давайте установим второй лоадер:

`npm install test-loader2 --save-dev`

После установки лоадеров мы можем воспользоваться ими в файле конфигурации (импортировать их не нужно). Смотрите синтаксис:

`export default { entry: './src/index.js', module: { rules: [ { test: /\.css$/i, // тип файла use: ['test-loader1', 'test-loader2'], // лоадеры }, ], }, };`

Можно элементы массива записать не в строку, а в столбик:

`export default { entry: './src/index.js', module: { rules: [ { test: /\.css$/i, use: [ 'test-loader1', 'test-loader2' ], }, ], }, };`

Для разных типов файлов можно писать разные правила:

`export default { entry: './src/index.js', module: { rules: [ { test: /\.sass$/i, use: [ 'test-loader1', 'test-loader2' ], }, { test: /\.less$/i, use: [ 'test-loader3', 'test-loader4' ], }, ], }, };`

Лоадеры выполняются по очереди. При этом очередь начинается с конца массива. То есть первым выполняется лоадер, указанный последним элементом массива, потом предпоследим и так далее.

←→
↑