Bundel Gaya dalam Tata Letak di Webpack

Sekarang mari kita atur agar Webpack secara otomatis menghubungkan bundel CSS ke tata letak HTML situs.

Misalkan dua file CSS diimpor ke titik masuk:

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

Mari kita konfigurasi pembangunan file-file ini menjadi satu bundel umum. Pertama, lakukan semua impor yang diperlukan:

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

Sekarang lakukan pengaturannya:

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

Hasilnya, setelah pembangunan, kita akan memiliki bundel dengan skrip terhubung dan bundel dengan gaya terhubung:

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

Hubungkan tiga file CSS ke titik masuk. Atur agar mereka terbangun menjadi satu bundel umum. Pastikan bahwa bundel ini secara otomatis terhubung ke file tata letak.