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'
],
},
],
},
};
ලෝඩර් අනුපිළිවෙලින් ක්රියාත්මක වේ. මෙම අනුපිළිවෙල අරාවේ අවසානයේ සිට ආරම්භ වේ. එනම්, අරාවේ අවසාන මූලද්රව්යය ලෙස දක්වා ඇති ලෝඩරය පළමුව ක්රියාත්මක වේ, පසුව අවසානයට පෙර එක සහ එලෙසම ඉදිරියට.
