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