本文中,苏南大叔的话题,还是webpackjquery。通过一个新的方法,让webpack的模块,认识jquery。这个方法不用安装任何的pluginloader,是在webpack里面自带的功能。

苏南大叔:webpack4系列教程,如何利用ProvidePlugin识别模块? - webpack-provide-plugin
webpack4系列教程,如何利用ProvidePlugin识别模块?(图4-1)

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0jquery@3.5.1

配置文件

本文还是以注册识别jquery为主要目的,所以,请确保您安装好了jquery

npm i jquery -S

安装好了jquery之后,下面还是要让系统识别$jQuery这两个全局变量。

卖半天关子,下面直接上配置文件,修改webpack.config.js:

//...
const webpack = require('webpack');
module.exports = {
    //...
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            jq:'jquery',
        }),
        //...
    ],
    //...
}

苏南大叔:webpack4系列教程,如何利用ProvidePlugin识别模块? - webpack-provide-plugin-config
webpack4系列教程,如何利用ProvidePlugin识别模块?(图4-2)

实验代码

main.js:

// require("jquery");
// import "jquery";
$("#test").html("test3");
jq("#test").html("test3");
jQuery("#test").html("test3");

这里可以看到,苏南大叔的代码里面,并没有引入jquery。但是经过webpack编译过的成品代码里面,却自动插入了jquery的相关代码。

苏南大叔:webpack4系列教程,如何利用ProvidePlugin识别模块? - jquery-code
webpack4系列教程,如何利用ProvidePlugin识别模块?(图4-3)

存在的问题

这样处理的jquery,确实能够让webpack处理的js代码,不用import也不用require,就能够正常使用。但是,存在着一些问题,比如:

  • 没有全局变量,在浏览器里面,检测不到jQuery对象,虽然检测到了$,但是却是调试工具自带的$

苏南大叔:webpack4系列教程,如何利用ProvidePlugin识别模块? - jquery-list-compare
webpack4系列教程,如何利用ProvidePlugin识别模块?(图4-4)

  • 多个.js文件都使用了相关对象的话,存在着重复引用的问题。这个问题,留待后续文章讨论。

相关链接

总结

如果所有的.js文件,都是经过webpack模块化的话,没有全局变量的这个问题,就根本不是问题。而且是属于自动插入相关代码,还是非常智能的。

更多webpack相关经验文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   jquery    webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: