Webpack-däki ýükleýjiler
Webpack-iň mümkinçiliklerini giňeltmek üçin şeýle-de ýükleýjiler peýdalanylýar. Olar belli bir görnüşli faýllary alyp, olary bilen belli bir amallary ýerine ýetirmäge mümkinçilik berýär.
Mysal üçin, giňeldişi
.less bolan ähli faýllary alyp,
olaryň tekstdyny CSS-e öwürmek,
soňra alnan CSS-i minimalizirlemek
we bir umumi faýlda saklamak bolýar.
Geliň, iki hýýal edilen ýükleýjiniň mysalynda ýükleýji bilen işlemeğiň umumy shemasyna ser salalyň.
Birinci ýükleýjini ornadalym:
npm install test-loader1 --save-dev
Ikinji ýükleýjini ornadalym:
npm install test-loader2 --save-dev
Ýükleýjileri ornatdan soň, biz konfigurasiýa faýlynda olardan peýdalanyp bileris (olary importirlemek gerek däl). Sintaksisa serediň:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i, // faýlyň görnüşi
use: ['test-loader1', 'test-loader2'], // ýükleýjiler
},
],
},
};
Massiw elementlerini setirde ýazmak ýerine, sütünde hem ýazmak bolýar:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.css$/i,
use: [
'test-loader1',
'test-loader2'
],
},
],
},
};
Tapawutly görnüşli faýllar üçin tapawutly düzgünler ýazyp bolýar:
export default {
entry: './src/index.js',
module: {
rules: [
{
test: /\.sass$/i,
use: [
'test-loader1',
'test-loader2'
],
},
{
test: /\.less$/i,
use: [
'test-loader3',
'test-loader4'
],
},
],
},
};
Ýükleýjiler nobat bilen işleýär. Şol ýerde nobat massiwyiň soňundan başlaýar. Ýagny ilkinji bolup massiwyiň iň soňky elementi hökmünde görkezilen ýükleýji işleýär, soňra soňky bolmanda we şuňa meňzeş.