Работа с HTML макетами в Webpack
Webpack
умеет работать с HTML макетами. Он позволяет автоматически выполнять подключение собранных бандлов к файлу макета. Это особенно удобно, когда имя бандла содержит хеш.
Для работы с HTML макетами используется html-webpack-plugin, давайте его установим:
npm install html-webpack-plugin --save-dev
Импортируем его:
webpack.config.jsimport HtmlWebpackPlugin from 'html-webpack-plugin';
Включим его:
webpack.config.jsexport default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
Теперь при сборке у нас автоматически будет генерироваться файл HTML макета и в этом макете автоматически будут подключены скрипты и стили.
Давайте попробуем самый простой случай, пусть у нас есть одна точка входа:
webpack.config.jsexport default {
entry: './src/index.js',
plugins: [
new HtmlWebpackPlugin(),
],
};
В результате после сборки наш JavaScript соберется в бандл с именем main.js
и этот бандл будет подключен к автоматически созданному макету сайта:
/dist/index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
Несколько бандлов скриптов
Если в результате сборки у нас получится несколько бандлов, то Webpack
подключит каждый из них. Пусть у нас есть следующие настройки:
webpack.config.jsexport default {
context: path.resolve("src"),
entry: {
test1: "./test1.js",
test2: "./test2.js",
},
output: {
filename: "[name].build.js",
path: path.resolve("dist"),
},
plugins: [new HtmlWebpackPlugin()],
};
После сборки к файлу макета будут подключены оба наших бандла:
/dist/index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<script defer src="test1.build.js"></script>
<script defer src="test2.build.js"></script>
</head>
<body>
</body>
</html>
Бандлы скриптов с хешем
Webpack
автоматически будет подключать бандлы с именами, содержащими хеши. Пусть у нас есть следующие настройки:
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 HtmlWebpackPlugin()],
};
После сборки к файлу макета будут подключены наши бандлы с хешами:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<script defer src="test1.4173b379c6d6ff439604.js"></script>
<script defer src="test2.72be8754d7c4cb0ece00.js"></script>
</head>
<body>
</body>
</html>