Слайдер Swiper не работает, когда я пользователь Webpack и импортировать это в приложении JS

Question

Я использую слайдер Swiper для слайдеров на моем веб-сайте, когда я использую веб-пакет и создаю приложение js для входа в веб-пакет. Больше не могу читать swiper.js мой конфигурационный веб-пакет

const webpack = require('webpack');
module.exports = {
mode:"development",
context: __dirname,
entry: {
    vendor: [
        './node_modules/jquery/dist/jquery.js',
    ],
    shopApps: "./apps/shop/shopApp.js",

},
module: {
    rules: [
        {
            test : /\.jsx?$/,
            loader: 'babel-loader',
            // exclude: ['/node_modules/','/assets/sass','/assets/plugins/'],

        },
        {
            test: /\.(html)$/,
            loader: 'html-loader',
            exclude: '/node_modules/'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
            exclude: ['/node_modules/',__dirname+'/assets/plugins/'],
        },
        {
            test: /jquery.+\.js$/,
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            },{
                loader: 'expose-loader',
                options: '$'
            }]
        },
        {
            test: /\.(scss)$/,
            use: [
                {
                    // Adds CSS to the DOM by injecting a `<style>` tag
                    loader: 'style-loader'
                },
                {
                    // Interprets `@import` and `url()` like `import/require()` and will resolve them
                    loader: 'css-loader'
                },
                {
                    // Loader for webpack to process CSS with PostCSS
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () { // post css plugins, can be exported to postcss.config.js
                            return [
                                // require('precss'),
                                require('autoprefixer')
                            ];
                        }
                    }
                },
                {
                    // Loads a SASS/SCSS file and compiles it to CSS
                    loader: 'sass-loader'
                }
            ]
        }
    ]
},
output: {
    path: __dirname + '/webpack',
    filename: "[name].js"
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    })
],
externals: {
    jquery: 'jQuery',
}

};

и мои shopApps, в которых у меня есть угловое приложение, и я вызываю js-файлы

require('./assets/css/style.css');
require('./assets/sass/app.scss') ;
import 'jquery';
import 'popper.js'
import 'bootstrap-material-design';
import 'moment';
import 'jalali-moment';
import 'swiper';
import 'underscore';
import angular from 'angular';
import ngRoute from 'angular-route';
import localStorage from 'angular-local-storage';
import moment from 'angular-moment';
const shopApps = angular.module('shopApp', [ngRoute,localStorage,moment]);
//router
require('./routerShopping')(shopApps);
require('./shopService')(shopApps);
require('./layout/headerFooter/header/webpackHeaderReq')(shopApps);
require('./homePage/webpackReqHome')(shopApps);
require('./assets/plugins/webpackReqPlugin')(shopApps);

, и мой html-файл, в котором я пишу скрипт-тег для кода swiper и html

<div class="bg-gray-light">
<div class="card bg-transparent">
    <div class="card-header text-center border-bottom-0">
        <h1 class="">
        are you have pet ?
        </h1>
        <h3>
            are you want pet
        </h3>
    </div>
    <div class="card-body text-center">
        <div class="swiper-container chosePet">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-18.png" alt="Dog">
                    </a>

                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-17.png" alt="Cat">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-15.png" alt="bird">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-16.png" alt="rabbit">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-19.png" alt="reptile">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  (function () {
    "use strict";
      import Swiper from  'swiper/dist/js/swiper';
        var bannerSlider = new Swiper('.chosePet', {
            slidesPerView: 1,
            fadeEffect: {
           crossFade: true
         },
          effect: 'fade',
          allowTouchMove: false,
          autoplay: {
              delay: 1000,
              disableOnInteraction: false,
              reverseDirection:true
          },
      })
    })();
</script>

когда я делаю файлы и запускаю http-сервер, у меня появляется ошибка

ReferenceError: Swiper не определен

спасибо за помощь