如何將單個依賴項與 Webpack 捆綁在一起？

Question

我正在嘗試將一個新的依賴項加載到我相當大的項目中，即 Glide.js。 有多個嵌套的 foo.html 文件，此依賴項必須能夠在其上運行。 最初，我只想說：

<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>

但是，我想使用 Webpack。我有一個webpack.config.js文件， Glide.js 的網站說我應該可以使用 Webpack。但它沒有說明如何做。 我如何做我在 Webpack 時嘗試做的事情？

我試着把它放在 webpack.config.js 文件中：

import Glide from '@glidejs/glide'

new Glide('.glide').mount()

我得到的只是

import Glide from '@glidejs/glide';
       ^^^^^

SyntaxError: Unexpected identifier

我該如何解決？

Answer 1

首先你應該了解 Webpack 是如何工作的，查看指南： https://webpack.js.org/guides/getting-started/

webpack.config.js是 webpack 的配置文件，你不應該把你的應用程序代碼放在那里。

移動你的代碼：

import Glide from '@glidejs/glide'

new Glide('.glide').mount()

進入您的捆綁入口點之一，例如。 src/index,js ，那么你應該運行 webpack 來構建你的資產，並在你的模板中使用生成的資產。