How to make a function global or why the called function in the HTML body is not defined at (index):843?

Question

webpack

Site on WordPress. On the main page in the code I call the function:


This function is added to the main.js file:

function myFunc(str){
    alert(str);
}

Next, I run through WebPack (webpack.config.js file below). All the norms are assembled, the build file is cut in the header. Open the file and see this function there, but in the HTML body calling this function I get an error...
What am I doing wrong?

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
    mode: 'production',// development production
    //Входной файл
    entry: {
        topScripts: './webpackTopScripts.js',
        bottomScripts: './webpackBottomScripts.js',
    },
    //Где лежат исходники
    context: path.resolve(__dirname, "assets"),
    //Куда складываем
    output: {
        filename: '[name].min.js',
        path: path.resolve(__dirname, "assets/min/js")
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename: '../css/style.min.css',
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test:/\.(s*)css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ]
            },
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/,
                use: ['url-loader']
            },
            {
                test: /\.(ttf|woff|woff2|eot)/,
                use: ['url-loader'],
            },
            {
                test: require.resolve("jquery"),
                loader: 'expose-loader',
                options: {
                    exposes: [
                        {
                            globalName: '$',
                            override: true
                        },
                        {
                            globalName: 'jQuery',
                            override: true
                        },
                    ]
                }
            },
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin(),
            new TerserWebpackPlugin({
                terserOptions: {
                    format: {
                        comments: false,
                    },
                    keep_classnames: true,
                    keep_fnames: true,
                },
                extractComments: false,
            })
        ],
    },
}