如何在 Webpack 中优雅地使用 jQuery？-JavaScript中文网-JavaScript教程资源分享门户

在现代的 Web 开发领域中，Webpack 可谓是一款强大的工具。它可以让开发者使用模块化的方式来组织代码，并且可以自动化地进行代码压缩、打包等操作。而对于前端开发来说，jQuery 也同样是一款非常实用的工具。它可以让开发者更方便地操作 DOM，并且提供了许多实用的插件和组件。那么，如何在 Webpack 中优雅地使用 jQuery 呢？

使用 npm 安装 jQuery

最简单也是最常用的方法是使用 npm 安装 jQuery：

npm install jquery --save

上面的命令会将 jQuery 安装到你的项目中，并且在 package.json 的 dependencies 中添加一条记录。

在 Webpack 中引入 jQuery

接下来，我们需要在 Webpack 中引入 jQuery。有两种方式：

1. 使用 ProvidePlugin 插件

ProvidePlugin 是 Webpack 自带的插件，它可以自动加载模块，避免每个模块中重复引入模块的问题。我们可以在 Webpack 的配置文件中添加以下内容：

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
]

上述代码中，我们通过 ProvidePlugin 插件将 $ 和 jQuery 注入到每个模块中。这样，在每个模块中就可以直接使用 $ 和 jQuery 了。

2. 使用 import 导入模块

另外一种方式是使用 import 导入模块：

import $ from 'jquery';

在这种方式中，我们需要手动导入 jquery 模块，并且指定一个变量名（这里使用了 $）。

在 HTML 中引入 jQuery

在 Webpack 配置好 jQuery 后，我们还需要在 HTML 中引入它。最简单的方式是采用 CDN 引入的方式：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

当然，如果你不想使用 CDN，也可以将 jQuery 下载到本地并在 HTML 中引用：

<script src="./jquery.min.js"></script>

使用 jQuery 插件

如果你需要使用一些 jQuery 插件，那么在 Webpack 中使用它们也是非常简单的。以 lightbox2 插件为例，我们可以像这样引入它：

import 'lightbox2';

$(document).ready(function() {
  $('a.lightbox').lightbox();
});

上述代码中，我们首先使用 import 导入了 lightbox2，然后在 ready 函数中使用它。

总结

通过本文，我们可以看出在 Webpack 中优雅地使用 jQuery 是非常简单并且实用的。通过 npm 安装 jQuery，然后使用 ProvidePlugin 或 import 导入模块并在 HTML 中引入 jQuery，就可以轻松地使用它了。非常推荐开发者去尝试一下！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646c9805968c7c53b0b8d26a