Bundle di stili nel layout in Webpack

Ora facciamo in modo che Webpack colleghi automaticamente il bundle CSS al layout HTML del sito.

Supponiamo che nel punto di ingresso vengano importati due file CSS:

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

Configuriamo la compilazione di questi file in un unico bundle comune. Per iniziare, eseguiamo tutte le importazioni necessarie:

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

Ora eseguiamo le configurazioni:

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

Di conseguenza, dopo la compilazione avremo il bundle con gli script e il bundle con gli stili collegati:

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

Collegate tre file CSS al punto di ingresso. Fate in modo che vengano compilati in un bundle comune. Verificate che questo bundle venga collegato automaticamente al file del layout.