Webpack တွင် CSS ဘန်ဒဲများအတွင်း ရင်းမြစ်များ

ယခု အောက်ပါအတိုင်း ပြုလုပ်ကြပါစို့၊ ၎င်းမှာ CSS ဖိုင်များတွင် ဖော်ပြထားသော .png ဖိုင်များသို့ လမ်းကြောင်းများကို တည်ဆောက်သည့်အခါ အစားထိုးပေးမည်ဖြစ်သည်။

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist')
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				type: 'asset/resource'
			},
			{
				test: /\.css$/i,
				use: [MiniCssExtractPlugin.loader, 'css-loader'],
			},
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: 'bundle.[contenthash].css'
		}),
		new HtmlWebpackPlugin(),
	],
};

၎င်း၏အလုပ်လုပ်ပုံကို စစ်ဆေးကြည့်ကြပါစို့။ အဝင်အမှတ်သို့ ရုပ်ပုံတစ်ပုံနှင့် စတိုင်ဖိုင်တစ်ခုကို ချိတ်ဆက်ပေးမည်။

import './images/img.png';
import './styles.css';

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

body {
	background: url('images/img.png');
}

တည်ဆောက်ပြီးနောက် CSS ဘန်ဒဲအတွင်း ရုပ်ပုံသို့ လမ်းကြောင်းသည် အသစ်တစ်ခုအဖြစ် ပြောင်းလဲသွားမည်ဖြစ်သည်။

body {
	background: url('မူလအမြစ်မှ မှန်ကန်သော လမ်းကြောင်း');
}

CSS ဖိုင်တွင် နောက်ခံရုပ်ပုံတစ်ပုံ သတ်မှတ်ပေးပါ။

ရုပ်ပုံကို အဝင်အမှတ်သို့ ချိတ်ဆက်ပေးပါ။

တည်ဆောက်မှုကို လုပ်ဆောင်ပြီး ရုပ်ပုံသည် မည်သည့်ဖိုင်သို့ ကူးထည့်သွားသည်ကို နှင့် CSS ဘန်ဒဲအတွင်း လမ်းကြောင်းအသစ်သည် မည်သို့ပုံစံရှိသည်ကို ကြည့်ရှုပါ။