Javascript 当我在应用程序js中使用webpack并导入此内容时，swiper滑块不起作用

当我使用webpack时，我在我的网站中使用滑动滑块 并为条目创建应用程序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',
}

还有我的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>

当我绑定文件并启动http服务器时，出现了错误

ReferenceError:未定义Swiper

---

谢谢你的帮助

这个方法解决了我的问题，根据文档，我做到了，它帮了我很多

导入Swiper和模块。 我想使用coverflow效果，我自己添加了它，如果你想，你也可以添加不同的效果

import {
    Swiper,
    Navigation,
    Pagination,
    Scrollbar,
    EffectCoverflow
} from 'swiper/dist/js/swiper.esm.js';

安装模块 然后我在游泳池上签上首字母

Swiper.use([Navigation, Pagination, Scrollbar, EffectCoverflow]);

现在你可以用刷子了 您还可以在该链接的“自定义生成”部分中阅读有关此内容的更多信息

---

这个方法解决了我的问题，根据文档，我这样做了，它帮了我很多

导入Swiper和模块。 我想使用coverflow效果，我自己添加了它，如果你想，你也可以添加不同的效果

import {
    Swiper,
    Navigation,
    Pagination,
    Scrollbar,
    EffectCoverflow
} from 'swiper/dist/js/swiper.esm.js';

安装模块 然后我在游泳池上签上首字母

Swiper.use([Navigation, Pagination, Scrollbar, EffectCoverflow]);

现在你可以用刷子了 您还可以在该链接的“自定义生成”部分中阅读有关此内容的更多信息

根据with网页，您可以将Swiper作为CommonJS模块导入，如下所示：

var Swiper=需要“Swiper”

或者，如果您需要ES模块，则：

从“Swiper”导入Swiper

根据with网页，您可以将Swiper作为CommonJS模块导入，如下所示：

var Swiper=需要“Swiper”

或者，如果您需要ES模块，则：

---

从“Swiper”导入Swiper

太多了+1给你。这对我很有用：var Swiper=require.././PATH/Swiper/package/Swiper bundle；太多了+1给你。这对我很有用：var Swiper=require.././PATH/Swiper/package/Swiper bundle；

var swiper = new Swiper('.swiper-container', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: false
    }
});