Лоадеры в 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'
],
},
],
},
};
Лоадеры выполняются по очереди. При этом очередь начинается с конца массива. То есть первым выполняется лоадер, указанный последним элементом массива, потом предпоследим и так далее.
