详解webpack3如何正确引用并使用jQuery库

webpack3引用jQuery背景与现状

在查阅百度、谷歌、Stack Overflow等技术社区后，终于解决了webpack3中引用jQuery的问题。网络上此类重复文章众多，且大多已过时。鉴于webpack发展迅速，目前版本已更新至3.5.5，但多数教程仍停留在1.0版本，真正能解决当前问题的内容寥寥无几。以下是经过验证的webpack3实现代码。

配置externals与入口引用

首先，需要在webpack的配置文件中添加外部引用设置。

externals: {
  jquery: "jQuery" //如果要全局引用jQuery，不管你的jQuery有没有支持模块化，用externals就对了。
}

接着，在项目的入口JavaScript文件中加入相应的引用代码。

const $ = require("jQuery");

ProvidePlugin插件使用问题

完成上述步骤即可正常使用。此前尝试过使用ProvidePlugin插件，虽然$符号可以正常工作，但jQuery的其他方法却无法调用。如果有读者了解具体原因，欢迎留言交流。

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

引用jQuery库的方法并非只有这一种，欢迎大家分享各自的解决方案，以便互相学习。

以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家多多支持本站。