Δέσμες στυλ στη διάταξη στο Webpack

Ας κάνουμε τώρα το Webpack να συνδέει αυτόματα τη δέσμη CSS στη διάταξη HTML του site.

Ας υποθέσου ότι στο σημείο εισόδου εισάγονται δύο αρχεία 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'],
			},
		],
	},
};

Ως αποτέλεσμα, μετά τη συλλογή θα έχουμε συνδεδεμένη τη δέσμη με scripts και τη δέσμη με στυλ:

<!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. Φροντίστε να συλλέγονται σε μια κοινή δέσμη. Ελέγξτε ότι αυτή η δέσμη θα συνδεθεί αυτόματα στο αρχείο διάταξης.