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