webpack4系列教程，如何利用ProvidePlugin识别模块？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、jquery@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',
        }),
        //...
    ],
    //...
}

实验代码

main.js:

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

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

存在的问题

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

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

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

相关链接

• https://newsn.net/say/webpack-start.html
• https://newsn.net/say/webpack-jquery.html
• https://newsn.net/say/webpack-expose-loader.html

总结

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

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

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。