帶有 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中導入，並且在那里看不到。