Webpack တွင် CSS Bundle များစွာ

အကယ်၍ entry point အများအပြားသည် ဖိုင်တစ်ခုထဲသို့ ပေါင်းစည်းသွားပါက၊ ထို CSS build ဖိုင်သည်လည်း ၎င်းတို့အတွက် တစ်ခုတည်းဖြစ်လိမ့်မည်။ အကယ်၍ ကျွန်ုပ်တို့သည် JavaScript ကို Bundle အများအပြားအဖြစ် တည်ဆောက်ပါက၊ ၎င်းတို့၏ တစ်ခုချင်းစီအတွက် သီးခြား CSS ဖိုင်များ တည်ဆောက်ထုတ်ပေးမည်ဖြစ်သည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် entry point တစ်ခုရှိပြီး ၎င်းထံသို့ style ဖိုင်အချို့ကို import လုပ်ထားသည်ဟု ယူဆကြပါစို့။

import './styles1-1.css';
import './styles1-2.css';

ဒုတိယ entry point ထံသို့လည်း style များ import လုပ်ထားသည်ဟု ယူဆပါစို့။

import './styles2-1.css';
import './styles2-2.css';

ဆက်တင်များကို ရေးကြည့်ကြပါစို့။

export default {
	context: path.resolve( 'src'),
	entry: {
		test1: './test1.js',
		test2: './test2.js'
	},
	output: {
		filename: '[name].[contenthash].js',
		path: path.resolve('dist'),
	},
	plugins: [new MiniCssExtractPlugin({
		filename: '[name].[contenthash].css'
	})],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

ဤသို့သော ဆက်တင်များဖြင့် CSS Bundle နှစ်ခု ထွက်လာမည်ဖြစ်သည်။ test1.398db7afe3b52e94bb25.css နှင့် test2.1d12c304c284a752cb9a.css တို့ ဖြစ်သည်။

Entry point သုံးခု ပြုလုပ်ပါ။ တစ်ခုစီအတွက် ကိုယ်ပိုင် CSS ဖိုင်များကို ချိတ်ဆက်ပါ။ Build လုပ်ပြီး ရလဒ်အဖြစ် ဘာရမည်ကို စစ်ဆေးကြည့်ပါ။