Các Gói Kiểu Dáng trong Bố Cục Webpack

Bây giờ hãy thiết lập để Webpack tự động kết nối gói CSS với bố cục HTML của trang web.

Giả sử có hai tệp CSS được nhập vào điểm vào:

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

Hãy cấu hình việc xây dựng các tệp này thành một gói chung. Trước hết, hãy thực hiện tất cả các lệnh nhập cần thiết:

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

Bây giờ hãy thực hiện các cài đặt:

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

Kết quả là sau khi xây dựng, chúng ta sẽ có gói chứa tập lệnh được kết nối và gói chứa kiểu dáng:

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

Hãy kết nối ba tệp CSS vào điểm vào. Thiết lập để chúng được xây dựng thành một gói chung. Kiểm tra xem gói này có tự động kết nối với tệp bố cục hay không.