如何将单个依赖与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's website说我应该可以使用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来构建你的资源，并在你的模板中使用生成的资源。