Loaderët në Webpack
Për zgjerimin e mundësive të Webpack përdoren gjithashtu loaderët. Ato lejojnë marrjen e skedarëve të një tipi të caktuar dhe kryerjen e operacioneve të caktuara me to.
Për shembull, mund të merren të gjithë skedarët me zgjatje
.less, të transformohet teksti i tyre në CSS,
pastaj CSS i përftuar të minimizohet
dhe të ruhet në një skedar të përbashkët.
Le të shohim skemën e përgjithshme të punës me një loader duke përdorur shembullin e dy loaderëve të imagjinuar.
Le të instalojmë loader-in e parë:
npm install test-loader1 --save-dev
Le të instalojmë loader-in e dytë:
npm install test-loader2 --save-dev
Pas instalimit të loaderëve, ne mund t'i përdorim ato në skedarin e konfigurimit (nuk ka nevojë t'i importohen). Shikoni sintaksën:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i, // tipi i skedarit
use: ['test-loader1', 'test-loader2'], // loaderët
},
],
},
};
Elementet e vargut mund të shkruhen jo në një rresht, por në një kolonë:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i,
use: [
'test-loader1',
'test-loader2'
],
},
],
},
};
Për tipe të ndryshme skedarësh mund të shkruhen rregulla të ndryshme:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.sass$/i,
use: [
'test-loader1',
'test-loader2'
],
},
{
test: /\.less$/i,
use: [
'test-loader3',
'test-loader4'
],
},
],
},
};
Loaderët ekzekutohen njëri pas tjetrit. Në këtë rradhë, ajo fillon nga fundi i vargut. Kjo do të thotë se së pari ekzekutohet loaderi i treguar si elementi i fundit i vargut, pastaj ai i parafundit dhe kështu me radhë.
