我们通常在做项目时可能会把第三方库打包到bundle中,比如下面这张图
如果不想把第三方库打包到bundle中,这就有了externals。官方的使用externals比较简单
externals
官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
只需三步——
1.在HTML中引入第三方库的cdn
2.在webpack中配置externals
externals: { jquery: "jQuery", }
3.在js中引用
const $ = require("jquery"); $("#content").html("<h1>hello world</h1>");
好,现在我们可以随心所欲的使用jquery插件并保证不会打包到bundle中。external是怎么办到的呢?下面我们通过bundle的源码来分析下原理。
这里的/* 0 */和__webpack_require__分别指打包前js对应的模块函数,这里就不细说了。这里可以看到module.exports = jQuery,就是说我们externals中的key指的是require的东西,value指的就是它,就是说“当require的参数是jquery的时候,使用jQuery这个全局变量引用它”。这种最简洁的externals配置方式为默认的global模式,就是在window上挂一个全局变量,然后直接可以使用这个变量。具体的流程是这样,我们在源码中使用require('jquery')后,可以直接把jquery加到externals中,得到一个打包的trunk.js,但是在引入这个trunkjs之前,肯定要先引入jquery这个库文件,这个库文件会创建一个全局变量jQuery,而咱们的trunkjs中externals的jquery是global模式,所以实际上trunkjs引入jquery的时候,就会从全局变量中引用,即module.export = jQuery
当然,既然是通过这种externals方式,其实我们可以不用require引入,直接使用全局变量也是可以的。
jQuery("#content").html("<h1>hello world</h1>");
大家如果注意到我刚说过的global模式的话,没错,你也许已经猜到了,我可以任意的使用不同的输出方式。如果打包文件我想运行到node环境下,我得使用commonjs规范,所以你要这么写。
externals: { jquery: "commonjs2 jQuery", }
打包后会是这样子。
然后我的项目中还用到了lodash,也想把它从bundle中移除,之前我的代码是这样子,引的是npm包