Webpack ရှိ Loaders များ

Webpack ၏ စွမ်းဆောင်ရည်များကို တိုးချဲ့ရန် loader များကိုလည်း အသုံးပြုကြသည်။ ၎င်းတို့သည် ဖိုင်အမျိုးအစားတစ်ခုခုကို ယူပြီး ၎င်းတို့နှင့် လုပ်ဆောင်ချက်အချို့ကို ဆောင်ရွက်ခွင့်ပြုပေးသည်။

ဥပမာအားဖြင့်၊ တိုးချဲ့ချက် .less ပါသည့် ဖိုင်အားလုံးကို ယူပြီး ၎င်းတို့၏ စာသားကို CSS အဖြစ်သို့ ပြောင်းလဲကာ ရရှိလာသော CSS ကို အသေးစိတ်ချုံ့ပြီး တစ်ခုတည်းသော ယေဘုယျဖိုင်တွင် သိမ်းဆည်းထားနိုင်သည်။

Loader နှင့် အလုပ်လုပ်ခြင်း၏ ယေဘုယျ ပုံစံကို စိတ်ကူးယဉ် loader နှစ်ခု၏ ဥပမာဖြင့် ကြည့်ကြရအောင်။

ပထမ loader ကို တပ်ဆင်ကြပါစို့။

npm install test-loader1 --save-dev

ဒုတိယ loader ကို တပ်ဆင်ကြပါစို့။

npm install test-loader2 --save-dev

Loader များ တပ်ဆင်ပြီးနောက် ကျွန်ုပ်တို့သည် ၎င်းတို့ကို ကွန်ဖီဂူရေးရှင်းဖိုင်တွင် အသုံးပြုနိုင်သည် (၎င်းတို့ကို import လုပ်စရာမလိုပါ)။ ဝါကျဖွဲ့ထုံးကို ကြည့်ပါ။

export default {
	entry: './src/index.js',
	module: {
		rules: [
			{
				test: /\.css$/i, // ဖိုင်အမျိုးအစား
				use: ['test-loader1', 'test-loader2'], // loader များ
			},
		],
	},
};

array ၏ element များကို စာကြောင်းတစ်ခုအနေဖြင့် မဟုတ်ဘဲ ကော်လံတစ်ခုအနေဖြင့် ရေးသားနိုင်သည်။

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'
				],
			},
		],
	},
};

Loader များကို အစဉ်လိုက် လုပ်ဆောင်သည်။ ထိုသို့ဆောင်ရွက်ရာတွင် အစီအစဉ်သည် array ၏ အဆုံးမှ စတင်သည်။ ဆိုလိုသည်မှာ array ၏ နောက်ဆုံး element အဖြစ် ဖော်ပြထားသော loader သည် ပထမဆုံးလုပ်ဆောင်ပြီး၊ ထို့နောက် ဒုတိယနောက်ဆုံးနှင့် အလားတူပင် ဆက်လက်လုပ်ဆောင်သည်။