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

本文中，苏南大叔带大家理解一下externals属性，本文中的实验例子还是jquery。externals属性是webpack的配置文件里面的一个项目，不用额外安装什么乱七八糟的plugin或者loader。

苏南大叔：webpack4系列教程，如何理解externals属性？ - webpack-externals
webpack4系列教程，如何理解externals属性？（图4-1）

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0、jquery@3.5.1。

添加引用

模板html里面添加jquery.js的引用：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
HTML

对应的入口文件js里面，还要保留对应的import或者require。

let jq = require("jquery");
JavaScript
import jq from "jquery";
JavaScript

这里的jquery，并不是个固定不变的名字，在本文中，它可以被externals属性所改变。这里先留个伏笔。在入口文件main.js里面，苏南大叔还是这么使用的：

jq("#test").html("test3");
$("#test").html("test3");
jQuery("#test").html("test3");
JavaScript

这三行代码中，jq函数来自import或者require，继而来自externals转化外部的jquery.js。而$和jQuery则直接来着外部的jquery.js生成的全局变量。

苏南大叔：webpack4系列教程，如何理解externals属性？ - webpack-externals-01
webpack4系列教程，如何理解externals属性？（图4-2）

修改配置文件

因为本文还是加载jquery，所以，记得清空相关配置项目，比如：expose-loader或者webpack.ProvidePlugin等。具体情况可以参见文末链接。

webpack.config.js：

module.exports = {
    mode: 'production', // 环境
    plugins: [
        // new webpack.ProvidePlugin({
        //     $: 'jquery',
        //     jQuery: 'jquery',
        //     jq:'jquery',
        // }),
    ],
    module: {
        rules: [
            //...
            // {
            //     test: require.resolve('jquery'),
            //     use: [
            //         {
            //             loader: 'expose-loader',
            //             options: '$'
            //         },
            //     ]
            // },
        ]
    },
    externals: {
        'jquery': '$',
        //'jquery': 'jQuery',
        //'jquery': 'jQuery.noConflict()'
    }
}
JavaScript

重点项目是：

externals: {
    'jquery': '$',
}
JavaScript
  • 左边的键名，是可以自定义的。主要是用于在模块化的js文件中，用来require或者import的。
  • 右边的键值，是已经存在的某个window全局变量或者函数。比如在本文中，因为外联引入了jquery.js。所以存在着全局的$和jQuery。甚至一条js语句，也是合法的键值。例如：jQuery.noConflict()。

所以在这里，下面的两个配置文件也是可以的。

externals: {
    'jquery': 'jQuery',
}
JavaScript
externals: {
     'jquery': 'jQuery.noConflict()'
}
JavaScript

苏南大叔：webpack4系列教程，如何理解externals属性？ - webpack-externals-02
webpack4系列教程，如何理解externals属性？（图4-3）

修改名字

因为键名可自定义，所以：
webpack.config.js:

externals: {
    'myjq': '$',
}
JavaScript

main.js:

let jq = require("myjq");
//import jq from "myjq";
jq("#test").html("test3");
JavaScript

苏南大叔：webpack4系列教程，如何理解externals属性？ - webpack-externals-03
webpack4系列教程，如何理解externals属性？（图4-4）

相关链接

总结

本文中，就是把jquery.js给抽取出来，成为了一个单独的js。然后又通过webpack的externals，配置成了一个可识别的模块。这个时候，编译后的main.js里面，虽然require或者import了，但是并不包含jquery.js的内容，从某种角度上来说，避免了多次重复加载的问题。

更多webpack相关文章，请点击：

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

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

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