我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

苏南大叔:webpack4系列教程,如何理解externals属性? - webpack-externals
webpack4系列教程,如何理解externals属性?(图4-1)

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

添加引用

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

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

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

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

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

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

这三行代码中,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()'
    }
}

重点项目是:

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

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

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

苏南大叔:webpack4系列教程,如何理解externals属性? - webpack-externals-02
webpack4系列教程,如何理解externals属性?(图4-3)

修改名字

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

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

main.js:

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

苏南大叔:webpack4系列教程,如何理解externals属性? - webpack-externals-03
webpack4系列教程,如何理解externals属性?(图4-4)

相关链接

总结

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

更多webpack相关文章,请点击:

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

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

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

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