Не работают плагины jquery при подключении через webpack. Как правильно настроить?

Question

[Матвей Румынин]

Пытаюсь настроить окружение для работы с webpack.
Модули npm загружены, там есть jquery и первый плагин - YTPlayer.
В точку сборки подключил jquery, в коде он доступен, работает. Когда подключаю туда плагин - пишет ...YTPlayer is not a function... в скомпиленом файле он есть! Но почему-то недоступен... Перерыл уже все мануалы, перепробовал все варианты, ничего не пойму.
Вот конфиг webpack:

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'
    }
};

Вот код точки сборки:

template.js

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

он подключает файл, в котором я вызываю плагин, и он нифига не работает!!!

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();

});

Хотя компилируется, и код там присутствует. Собирает jquery, YTPlayer и web.js

Answer 1

[Юра Комаров]

Добавить строку

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

в настройках webpack.config.js в раздел resolve
Полное описание блока resolve

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