Webpack တွင် လေးနက်စွာဖြန့်ဝေသော စတိုင်များ အတွဲများ

ယခုတွင် ကျွန်ုပ်တို့၌ entry points အများအပြားရှိပြီး ၎င်းတို့သည် ၎င်းတို့၏ကိုယ်ပိုင် bundles များအဖြစ် စုစည်းထားသည်ဟု ဆိုကြပါစို့။ ထို့အပြင် တစ်ခုစီသော entry point တိုင်းသို့ ၎င်းတို့၏ကိုယ်ပိုင် CSS ဖိုင်များ ချိတ်ဆက်ထားသည်ဆိုပါစို့။ သင်သိပြီးသလိုပင်၊ ဤအခြေအနေတွင် entry point တစ်ခုစီအတွက် ၎င်း၏ကိုယ်ပိုင် CSS bundle ရှိလိမ့်မည်။ Webpack သည် ထို bundles များတစ်ခုစီကို အလိုအလျောက် ချိတ်ဆက်ပေးမည်။

လက်တွေ့စမ်းကြည့်ကြပါစို့။ ပထမဆုံး entry point သို့ စတိုင်များကို ချိတ်ဆက်ကြပါမည်။

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

ဒုတိယ entry point သို့ စတိုင်များကို ချိတ်ဆက်ကြပါမည်။

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'
		}),
		new HtmlWebpackPlugin(),
	],
	module: {
		rules: [
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		],
	},
};

ရလဒ်အနေဖြင့် layout ဖိုင်သည် အောက်ပါပုံစံအတိုင်း ရှိလိမ့်မည်။

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Webpack App</title>
		<script defer src="test1.18e856b0da2f7862ab19.js"></script>
		<script defer src="test2.d12ade182c2989b4efa8.js"></script>
		<link href="test1.398db7afe3b52e94bb25.css" rel="stylesheet">
		<link href="test2.1d12c304c284a752cb9a.css" rel="stylesheet">
	</head>
	<body>
		
	</body>
</html>

Entry point သုံးခု ဖန်တီးပါ။ Entry point တစ်ခုစီတွင် CSS ဖိုင်သုံးခုစီကို ချိတ်ဆက်ပါ။ Build လုပ်ပါ။ Bundles အားလုံးကို အလိုအလျောက် ချိတ်ဆက်ပေးကြောင်း သေချာပါစေ။