Как настроить webpack в проекте
Всем привет, я только начал изучать webpack. У меня появился вопрос касаемо подключения скриптов к html страницам.
У меня есть стандартная конфигурация. В webpack конфиге мы имеем entrypoint javascript файл, после этого с помощью плагина html-webpack-plugin создаем страницу, в которую подключается скрипт.
module.exports = {
entry: {
main: './src/index.ts',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].[contenthash].js",
clean: true
},
devServer: {port: 3333},
resolve: {
extensions: [".ts", ".js"],
},
optimization: {
minimizer: [
new TerserWebpackPlugin(),
new CssMinimizerPlugin()
]
},
module: {
rules: [
{
test: /\.css$/i,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(ts)$/,
exclude: /node_modules/,
use: "ts-loader"
}
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
chunks: ['main']
}),
new HtmlWebpackPlugin(
{
filename: "header.html",
template: "./src/templates/Header/Header.html",
title: "Hello header!",
css: ["./src/templates/Header/headers.css"]
}
),
]
}
Как правильно настроить вебпак, если у меня многостраничный сайт (тоесть много html страниц), которым нужны соответствующие скрипты + нужно динамически подставить Header и Footer (я знаю что это делается с помощью html-webpack). Подключать вручную в html тегом script? или есть какойто стандарт, или универсальный способ?
UPD
Наткнулся на такой ответ
Если мне действительно придется для каждой страницы создавать HTMLWEbplacPlugin инстанс с chunk и template, то как мне подключать css файлы к определенному html без импорта в js файл?