Бандлҳои услубҳо дар макети Webpack

Ҳоло биёед чунон кунем, ки Webpack ба таври худкор бандли CSS-ро ба макети HTML-и сомона пайваст кунад.

Бигзор ба нуқти воридот ду файли CSS ворид карда шаванд:

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

Биёед танзими гирдовардани ин файлҳо ба як бандли умумӣ кунем. Аввал ҳамаи воридотҳои заруриро иҷро кунем:

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

Ҳоло танзимҳоро иҷро кунем:

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

Дар натиҷа пас аз гирдоварӣ мо бандли пайвастшуда бо скриптҳо ва бандли пайвастшуда бо услубҳо хоҳем дошт:

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

Ба нуқти воридот се файли CSS пайваст кунед. Чунон кунед, ки онҳо ба як бандли умумӣ гирд оянд. Таҳти назорат гиред, ки ин бандл ба таври худкор ба файли макет пайваст шавад.