jquery plugins not working when connected via webpack. How to set up correctly?

Question

JavaScript

I'm trying to set up an environment to work with webpack.
The npm modules are loaded, jquery is there and the first plugin is YTPlayer.
I connected jquery to the assembly point, it is available in the code, it works. When I connect the plugin there, it says ... YTPlayer is not a function ... it is in the compiled file! But for some reason it is not available ... I have already rummaged through all the manuals, tried all the options, I don’t understand anything.
Here is the webpack config:

webpack.config.js

const path = require('path');

// webpack.config.js
const webpack = require('webpack')

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            '$': 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jquery': 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery'
        })
    ],
    entry: ['./code/template.js', './scss/template.scss'],
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: 'template.js'
    },
    resolve: {
        root: ['./node_modules']
    },
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].css',
                            outputPath: ''
                        }
                    },
                    //{
                        // Adds CSS to the DOM by injecting a `<style>` tag
                        // This loader using when disable file-loader, to include css into bundle.js
                        //loader: 'style-loader'
                    //},
                    //{
                        // Interprets `@import` and `url()` like `import/require()` and will resolve them
                        // This loader using when disable file-loader, to include css into bundle.js
                        //loader: 'css-loader'
                    //},
                    {
                        // Loader for webpack to process CSS with PostCSS
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('autoprefixer')
                                ];
                            }
                        }
                    },
                    {
                        // Loads a SASS/SCSS file and compiles it to CSS
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },
    watch: true,
    devtool: "source-map",
    // This remove jquery code from bundle to use external CDN
    externals: {
        //jquery: 'jQuery'
    }
};

Here is the assembly point code:

template.js

import 'bootstrap';
import $ from 'jquery';
import 'jquery.mb.ytplayer';
import './web'

it includes the file in which I call the plugin, and it doesn't work!!!

web.js

import $ from "jquery";
import 'jquery.mb.ytplayer';

$(document).ready(function () {

    $("button.offcanvas").click(function (e) {
        $("body").toggleClass("hide");
        e.preventDefault();
        return false;
    });

    $(".offside").click(function (e) {
        $("body").toggleClass("hide");
        //e.preventDefault();
        //return false;
    });

    $("#bgndVideo").YTPlayer();

});

Although it compiles, and the code is present there. Builds jquery, YTPlayer and web.js

Answer 1

Add line

alias: {
        jquery: require.resolve('jquery'),
      },

in the webpack.config.js settings in the resolve section
Full description of the resolve block

resolve: {
      modulesDirectories: ['node_modules'],
      extensions: ['.js', ''],
      alias: {
        jquery: require.resolve('jquery'),
      },
    },