โหลดเดอร์ใน 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'
				],
			},
		],
	},
};

โหลดเดอร์ทำงานตามลำดับ โดยที่ลำดับเริ่มจากท้ายอาร์เรย์ นั่นคือ โหลดเดอร์แรกที่จะทำงานคือ โหลดเดอร์ที่ระบุเป็นองค์ประกอบสุดท้ายของอาร์เรย์ จากนั้นคือรองสุดท้าย และต่อๆ ไป