HtmlWebpackPlugin load bundle.[hash].js/css into base twig file

I have two entries in my webpack.config.js. One for the JS and one for the SCSS. I can run in development and product mode. If i create a production build I get the following files: index.html, main[hash].js, main[hash].css. In the index.html i have the link and script tag with the src to the files. How do i load these link & script tags in my base.twig file that get loaded when deploying the application? In development it loads the main.js from the base.twig and in that file everything is included.

base.twig

<script src="assets/main.js"></script>

Folder structure:

index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="main.7a67bd4eae959f87c9bc.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="main.7a67bd4eae959f87c9bc.js"></script></body>
</html>

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
    const devMode = options.mode === 'development';

    return {
        mode: (devMode) ? 'development' : 'production',
        watch: devMode,
        devtool: "source-map",
        entry: [
            './resources/javascript/index.js',
            './resources/sass/app.scss'
        ],
        output: {
            path: path.resolve(__dirname, 'public/assets'),
            filename: devMode ? '[name].js' : '[name].[hash].js'
        },

        module: {
            rules: [
                {
                    test:   /\.twig/,
                    loader: 'twig-loader'
                },
                {
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        {
                            loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                        },
                        {
                            loader: "css-loader",
                        },
                        {
                            loader: "postcss-loader"
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                implementation: require("sass")
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|jpe?g|gif|svg)$/,
                    use: [
                        {
                            loader: "file-loader",
                            options: {
                                outputPath: 'images'
                            }
                        }
                    ]
                },
                {
                    test: /\.(woff|woff2|ttf|otf|eot)$/,
                    use: [
                        {
                            loader: "file-loader",
                            options: {
                                outputPath: 'fonts'
                            }
                        }
                    ]
                }
            ]
        },

        plugins: [
            new MiniCssExtractPlugin({
                filename: devMode ? '[name].css' : '[name].[hash].css',
            }),
            new BrowserSyncPlugin({
                proxy: 'https://dev.identity/oauth/authorize?response_type=code&client_id=1c9e2b58-2d01-4c92-a603-c934dfa9bc78&redirect_uri=https://localhost/hooray&state=aaaaa&code_challenge=12345678901234567890123456789012345678901123&code_challenge_method=plain&resource=https://cloud.ctdxapis.io&scope=cloud:my-profile'
            }),
            new CopyPlugin([
                { from: './resources/images', to: './images' }
            ]),
            new HtmlWebpackPlugin({

            }),
        ]
    };
};

Updated structure:

Solution

You can provide templateContent config property of HTMLWebpackPlugin in-order to generate your assets.twig file

new HtmlWebpackPlugin({
  templateContent: function(params) {
    return `
    {% block jsAssets %}
      ${params.htmlWebpackPlugin.files.js.map(
        file => `<script src="${file}"></script>`,
      )}
    {% endblock %}

    {% block cssAssets %}
      ${params.htmlWebpackPlugin.files.css.map(
         file => `<link rel="stylesheet" type="text/css" href="${file}">`,
       )}
    {% endblock %}`;
  },
  filename: '../../resources/templates/assets.twig',
  inject: false, // prevents from the plugin to auto-inject html tags
});

Then in your base.twig just use the blocks method to specify where to render your assets.

{{ block("jsAssets", "assets.twig") }}
{{ block("cssAssets", "assets.twig") }}