Как настроить 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

Наткнулся на такой ответ

https://stackoverflow.com/questions/39798095/multiple-html-files-using-webpack#:~:text=163-,See%20an%20entrypoint,-as%20the%20root

Если мне действительно придется для каждой страницы создавать HTMLWEbplacPlugin инстанс с chunk и template, то как мне подключать css файлы к определенному html без импорта в js файл?


Ответы (0 шт):