Бандлы стилей в макете Webpack
Webpack
может автоматически подлючал CSS бандл к HTML макету сайта. Пусть к точке входа импортируются два CSS файла:
/src/index.jsimport './styles1.css';
import './styles2.css';
Давайте настроим сборку этих файлов в один общий бандл, для начала выполним все нужные импорты:
webpack.config.jsimport path from 'path';
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import HtmlWebpackPlugin from 'html-webpack-plugin';
Теперь выполним настройки:
webpack.config.jsexport 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"],
},
],
},
};
В результате после сборки у нас будет подключен бандл со скриптами и бандл со стилями:
<!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 файлы. Как вы уже знаете, в этом случае для каждой точки входа будет свой CSS бандл. Webpack
автоматически подключит каждый из этих бандлов.
Подключим стили к первой точке входа:
/src/test1.jsimport './styles1-1.css';
import './styles1-2.css';
Подключим стили ко второй точке входа:
/src/test2.jsimport './styles2-1.css';
import './styles2-2.css';
Выполним настройку:
webpack.config.jsexport default {
context: path.resolve("src"),
entry: {
test1: "./test1.js",
test2: "./test2.js",
},
output: {
filename: "[name].[contenthash].js",
path: path.resolve("dist"),
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
new HtmlWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
В результате файл макета будет иметь следующий вид:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<script defer src="test1.18e856b0da2f7862ab19.js"></script>
<script defer src="test2.d12ade182c2989b4efa8.js"></script>
<link href="test1.398db7afe3b52e94bb25.css" rel="stylesheet">
<link href="test2.1d12c304c284a752cb9a.css" rel="stylesheet">
</head>
<body>
</body>
</html>