externals

官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

怎么理解呢?我们先通过官网说的那个jquery的案例来理解。

有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我们在使用时,依旧用require的方式来使用,但是却不希望webpack将它又编译进文件中。

  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

View  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

 

jquery的使用如下

  // 我们不想这么用
// const $ = window.jQuery // 而是这么用
const $ = require("jquery")
$("#content").html("<h1>hello world</h1>")

  

这时,我们便需要配置externals

module.exports = {
...
output: {
...
libraryTarget: "umd"
},
externals: {
jquery: "jQuery"
},
...
}

我们可以看看编译后的文件

({
0: function(...) {
var jQuery = require(1);
/* ... */
},
1: function(...) {
// 很明显这里是把window.jQuery赋值给了module.exports
// 因此我们便可以使用require来引入了。
module.exports = jQuery;
},
/* ... */
});

  

我们自己可以写个例子,当然这个例子没什么实际意义,只是为了演示如何使用而已。

假设我们自己有个工具库,tools.js,它并没有提供给我们UMD的那些功能,只是使用window或者global的方式把工具的对象tools暴露出来

window.Tools = {
add: function(num1, num2) {
return num1 + num2
}
}

接下来把它放在任何页面能够引用到的地方,例如CDN,然后用script的方式引入页面

 <script src="http://xxx/tools.min.js"></script>

一般来说我们可能会直接就这么用了

const res = Tools.add(1,2)

但是既然我们是模块化开发,当然要杜绝一切全局变量了,我们要用require的方式。

 const tools = require('mathTools')
const res = tools.add(1,2)

  

这是我们再来配置一些externals即可

   module.exports = {
...
output: {
...
libraryTarget: "umd"
},
externals: {
mathTools: "tools"
},
...
}

关于externals的配置

首先是libraryTarget的配置,我们上面的例子都是umd 
当然它还有其他配置方式,具体就看官网文档吧,我们可以看到配置成umd便可以使用任何一种引入的方式了

webpack的externals的使用的更多相关文章

  1. 配置webpack中externals来减少打包后vendor.js的体积

    在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...

  2. 减少打包组件vue.config.js——Webpack的externals的使用

    vue.config.js module.exports = { configureWebpack:{ externals: { vue: 'Vue', 'vue-router':'VueRouter ...

  3. 【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!

      [前言]:因为最近在搞百度地图API的时候到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的"收尾工作"--即打包,而没有把它纳入到 ...

  4. 搭建一个webpack微服务器

    [前言]:因为最近在vue2.0的时候用到了webpack的externals,才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包,而没有把它纳入到项目开发的“主体过程”中来 ...

  5. Webpack4 学习笔记四 暴露全局变量、externals

    前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose-loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CD ...

  6. create-react-app 使用 webpack 打包压缩失败

    问题,正常 npm run build 打包后,发现打包后的文件异常大,有 > 20M 的大小 分析, 1.起初以为是代码本身过大的原因导致的,所以一直在想如何进行代码拆分使得文件能尽可能的小, ...

  7. 项目构建分析和 webpack 优化实践

    加入新公司一个月,最近接手在做一个 chrom 浏览器插件的项目,开发过程中发现项目打包的时间很长,足足有30多秒,这是让人很难接受的,而且构建的显示了几条包体积过大的提示信息: 可以看到,打包后有三 ...

  8. webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...

  9. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

随机推荐

  1. Linux系统下x86和ARM的区别有哪些?

    问题: 最近在用三星的一款i5处理器的Windows平板,和iPad,以及其他使用ARM处理器的手机相比,发热量大很多,甚至需要借助风扇来散热,耗电量也大了不少. 那么就很奇怪,在主频相差不大,并且实 ...

  2. 说说erlang tuple和record结构

    erlang有两种复合结构.tuple和list,两者的区别是tuple子元素的个数是固定不变的.声明后就不能改变了.而list是可变的,能够通过[H|T]来取出或插入新元素. record有点像C/ ...

  3. 小型互联网公司的IT系统建设思路

    ​​最近一些想创业的一帮兄弟来问我,准备借助互联网的翅膀,做某某事情,并想尽快的做出一个系统平台. 我给的思路,分6个步骤: 需求-> 灵感设计 ->实现 ->迭代改进 ->成 ...

  4. .NET HttpGet 获取服务器文件下的图片信息 同步和异步方式处理

    /// <summary> /// 项目文件夹下路径 返回流类型数据,如:图片类型 /// </summary> /// <returns></returns ...

  5. vim简单的移动光标

    vim学习简单的光标移动 ==> 移动到行首 $ ==> 移动到行尾 ^ ==> 移动到本行第一个不是blank的位置 g_ ==> 移动到本行最后一个不是blank的位置^Z ...

  6. 备份与还原ORACLE数据库(通过CMD命令执行)

    31.1:(若用程序调用cmd,则在备份和还原 末尾语句加上 2>&1 ,直接运行则不需要加) --备份:     1) exp SA/"""abc@123 ...

  7. js对象与字符串的想到转换

    js JSON.stringify(jsObj);   对象转字符串JSON.parse(str);  字符串转对象

  8. JavaScript学习历程01

    水仙花数 ps:各位数字立方和等于该数本身 方法1 (数组) <script type="text/javascript"> var i = 100; var newi ...

  9. 乾坤合一~Linux设备驱动之终端设备驱动

    多想拥你在我的怀里 却无法超越那距离 美好回忆渐渐地远去 盼望今生出现奇迹 无尽的想念 荒了容颜 无助的爱恋 从未改变 这是今天的旋律,,,,今生今世,遥不可及~ 1 终端设备 终端是一种字符型设备, ...

  10. 【2019年03月29日】股票的滚动市盈率PE最低排名

    仅根据最新的市盈率计算公式进行排名,无法对未来的业绩做出预测. 深康佳A(SZ000016) - 滚动市盈率PE:2.51 - 滚动市净率PB:1.68 - 滚动年化股息收益率:2.9% - - - ...