带有 Webpack 5 的 Swiper 8：未定义 Class

Question

我正在尝试将 Swiper 8 与 Webpack 5 一起使用。

在我的 Webpack 配置中，我定义了两个入口点：

module.exports = {
    entry: {
        vendor: './vendor.js',
        frontend: './frontend.js',
    }
    ...
}

在 vendor.js 中，我导入了 Swiper：

import 'swiper/scss';
import Swiper from 'swiper';

在 frontend.js 中，我导入了我的脚本文件：

import './custom.js'

不，我尝试在我的 custom.js 中初始化 Swiper：

const swiper = new Swiper('.swiper', {});

在这里我收到一条错误消息：

未捕获的 ReferenceError：未定义 Swiper

在我的 HTML 文件中，我在 frontend.js 文件之前导入了 vendor.js。 从理论上讲，我应该可以使用 Swiper class。 我究竟做错了什么？

<script type="text/javascript" src="/dist/vendor.js"></script>
<script type="text/javascript" src="/dist/frontend.js"></script>

Answer 1

您将需要

import Swiper from 'swiper';

在您的custom.js中，因为即使它在frontend.js中正确导入，它也没有在custom.js中导入，并且在那里看不到。