Bundles za Mitindo kwenye Mpangilio wa Webpack

Hebu sasa tufanye Webpack kiunge kiotomatiki bundle ya CSS kwenye mwonekano wa HTML wa tovuti.

Hebu kwenye sehemu ya kuingia kiingizwe faili mbili za CSS:

import './styles1.css';
import './styles2.css';

Hebu tusaidie usanidi wa kukusanya faili hizi kuwa bundle moja ya pamoja. Kwanza tufanye uingizwaji wote unaohitajika:

import path from 'path';
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import HtmlWebpackPlugin from 'html-webpack-plugin';

Sasa tufanye usanidi:

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

Kama matokeo baada ya kukusanya tutakuwa na bundle iliyounganishwa na mafaili ya hati za mwongozo na bundle iliyo na mitindo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Webpack App</title>
		<script defer src="build.4173b379c6d6ff439604.js"></script>
		<link href="build.97299e5ee87c9c343a4c.css" rel="stylesheet">
	</head>
	<body>
		
	</body>
</html>

Unganisha kwenye sehemu ya kuingiza faili tatu za CSS . Fanya vile, zikusanywe kuwa bundle ya pamoja. Hakikisha kuwa bundle hii imeunganishwa kiotomatiki kwenye faili ya mwonekano.