Можно ли такое реализовать на Вебпаке?

Question

romaro @romaro

Можно ли такое реализовать на Вебпаке?

Я компилирую страницы при помощи загрузчика ejs-compiled-loader и плагина HtmlWebpackPlugin. Проблема в том, что вебпак никак не обрабатывает ссылки в теге script. Например, после компиляции такого шаблона:

<!DOCTYPE html>
<html lang="ru">

<body>
    <%- include child -%>
    <script defer src="../scripts/script1.js"></script>
</body>

</html>

Я получаю:

<!DOCTYPE html>
<html lang="ru">

<head>
    <link href="../style.css" rel="stylesheet">
</head>

<body>
    <h1>Дочерний блок</h1>
    <script defer src="../scripts/script1.js"></script>
    <script defer src="../bundle.js"></script>
</body>

</html>

Хотелось бы, чтобы после компиляции вебпак:
1) проходился по всем ссылкам в скриптах;
2) обрабатывал бы скрипты по этим ссылкам через бабель;
3) создавал для каждого скрипта отдельный файл в паблике;
4) менял ссылку на обработанный файл со скриптом;

Можно ли это в принципе реализовать и какой путь?

Мой конфиг:

import path from 'path';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const PAGES = ['test'];

// TODO
const __dirname = '/home/nodejs/proj/';

export default {
    context: path.resolve(__dirname, 'source'),
    entry: './entry.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public'),
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        ...PAGES.map((page) =>
            new HtmlWebpackPlugin({
                template: `./templates/pages/${page}.ejs`,
                filename: `./views/${page}.njk`,
                inject: 'body'
            })
        )
    ],
    module: {
        rules: [
            {
                test: /.ejs$/,
                use: {
                    loader: 'ejs-compiled-loader',
                    options: {
                        htmlmin: false,
                        htmlminOptions: {
                            removeComments: true
                        }
                    }
                }
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.s[ac]ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.woff(2)?$/,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[hash][ext][query]'
                }
            },
            {
                test: /\.(jpeg|jpg|png|gif)?$/,
                type: 'asset/resource',
                generator: {
                    filename: 'images/[hash][ext][query]'
                }
            },
            {
                test: /\.svg$/,
                type: 'asset/resource',
                generator: {
                    filename: 'svg/[hash][ext][query]'
                }
            },
        ]
    }
}