Для подключения part файлов (таких как header, footer и других) в файл index.html с использованием Webpack, вам потребуется настроить несколько вещей.
1. Установите необходимые пакеты:
npm install --save-dev html-webpack-plugin html-loader
2. Создайте конфигурационный файл Webpack (например, webpack.config.js) и настройте его следующим образом:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /.html$/,
use: ['html-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body',
}),
],
};
3. Создайте файл index.html в папке src и добавьте следующий код для подключения part файлов:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Webpage</title>
</head>
<body>
<div id="header"></div>
<div id="content">
<h1>Welcome to my webpage</h1>
</div>
<div id="footer"></div>
</body>
</html>
4. Создайте файлы для header и footer в папке src и добавьте содержимое, например:
<!-- header.html -->
<header>
<h1>My Website</h1>
</header>
<!-- footer.html -->
<footer>
<p>© 2021 My Website</p>
</footer>
5. Создайте точку входа для JavaScript в папке src (например, index.js):
import './header.html'; import './footer.html';
6. Запустите сборку проекта с помощью команды:
npx webpack
7. После завершения сборки, должна создаться папка dist с файлом index.html внутри. Откройте index.html в браузере и убедитесь, что part файлы (header и footer) успешно подключены.
В результате вы создали конфигурацию Webpack, которая использует плагин HtmlWebpackPlugin для генерации файла index.html на основе вашего шаблона. Установленный загрузчик html-loader позволяет импортировать содержимое part файлов в JavaScript код, который будет встроен в сгенерированный HTML файл.