Can this be done in Webpack?

R

romaro2021-09-16 17:55:28

JavaScript

romaro, 2021-09-16 17:55:28

I am compiling pages using the ejs-compiled-loader and the HtmlWebpackPlugin. The problem is that webpack doesn't handle links in the script tag in any way. For example, after compiling this template:

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

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

</html>

I get:

<!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>

I would like that after compiling the webpack:
1) go through all the links in the scripts;
2) would process scripts on these links through Babel;
3) created a separate file in the public for each script;
4) changed the link to the processed file with the script;

Is it possible to implement this in principle and in what way?

My config:

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]'
                }
            },
        ]
    }
}