Bundles de styles dans la mise en page avec Webpack

Faisons maintenant en sorte que Webpack connecte automatiquement le bundle CSS au modèle HTML du site.

Supposons que deux fichiers CSS soient importés par le point d'entrée :

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

Configurons la compilation de ces fichiers en un bundle commun. Commençons par effectuer toutes les importations nécessaires :

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

Maintenant, effectuons les configurations :

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

En conséquence, après la compilation, nous aurons le bundle avec les scripts connecté et le bundle avec les styles :

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

Connectez trois fichiers CSS au point d'entrée. Faites en sorte qu'ils soient compilés en un bundle commun. Vérifiez que ce bundle est automatiquement connecté au fichier de mise en page.