如何将单个依赖项与 Webpack 捆绑在一起？

Question

I'm trying to load a new dependency into my rather sizable project, namely Glide.js. There are multiple nested foo.html files on which this dependency must be able to run. Initially, I was going to just put:

<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>

However, I want to use Webpack. I do have a webpack.config.js file, and Glide.js's website says I should be able to use Webpack. But it doesn't say how to do it. How do I do what I tried to do early but in Webpack?

I tried putting this in the webpack.config.js file:

import Glide from '@glidejs/glide'

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

and all I get is

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

SyntaxError: Unexpected identifier

How do I fix this?

Answer 1

first you should understand how Webpack works, checkout the guide: https://webpack.js.org/guides/getting-started/

webpack.config.js is webpack's configuration file and you shouldn't put there your app code.

Move your code:

import Glide from '@glidejs/glide'

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

into one of your bundle entrypoint, ex. src/index,js , then you should run webpack to build your assets, and use generated assets in your templates.