Vifurushi Vya Mitindo Mingi Katika Muundo Katika Webpack

Hebu sasa tuwe na vituo vingi vya kuingia, ambavyo vinakusanywa katika vifurushi vyake. Hebu kwa kila kituo cha kuingia kuwe na faili za CSS zimeunganishwa. Kama unavyojua tayari, katika kesi hii, kwa kila kituo cha kuingia kutakuwa na kifurushi chake cha CSS. Webpack kiotomatiki itaunganisha kila moja ya vifurushi hivi.

Hebu tuangalie kwa vitendo. Wacha tuunganishe mitindo kwa kituo cha kwanza cha kuingia:

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

Wacha tuunganishe mitindo kwa kituo cha pili cha kuingia:

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

Wacha tufanye usanidi:

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

Kama matokeo, faili la muundo litakuwa na mfumo ufuatao:

<!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>

Fanya vituo vitatu vya kuingia. Kwa kila kituo unganisha faili tatu za CSS. Fanya usanikishaji. Hakikisha kuwa kiotomatiki vifurushi vyote vinaunganishwa.