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. matplotlib 与 seaborn 中出现中文乱码的解决方法

      Linux.Mac osx 系统中,出现 matplotlib 或 seaborn 绘图中有中文乱码的情形,可以考虑使用以下方式处理: 到 anaconda 的 matplotlib 中查看是否有 ...

  2. Java读取Excel内容

    借助于apathe的poi.jar,由于上传文件不支持.jar所以请下载后将文件改为.jar,在应用程序中添加poi.jar包,并将需要读取的excel文件放入根目录即可 本例使用java来读取exc ...

  3. 我的IT之路这样走过

    一.我的IT之路这样走过: 1.大一上学期.我们学校是用C语言做启蒙语言的:虽然我学的相当不错,但是我发现一个问题:用C语言做软件那么它的交付周期比较长. 对于我这种无产阶级来说最关键的是解眼下的粮食 ...

  4. ComputeShader中Consume与AppendStructuredBuffer的使用

    上个月写了一篇使用像素shader返回累加信息的Trick:https://www.cnblogs.com/hont/p/9977401.html 后来无意中发现DX11/Compute shader ...

  5. 解决通过Nginx转发的服务请求头header中含有下划线的key,其值取不到的问题

    1. 问题 由于在http请求头的头部中设置了一些自定义字段,刚好这些字段中含有下划线,比如bundle_name这种,后端在进去获取头部信息时,发现取不到对应的值 2. 原因及解决办法 分析 首先看 ...

  6. linux下以‘-’开头的文件名

    linux下以‘-’开头的文件名,cp.mv.rm.ls等对他都是无效的: [root@ha131 ~]# ll -plat.py ls:无效选项 -- . 请尝试执行"ls --help& ...

  7. 2.4G还是5G?带你选择最正确的路由器

    智能设备井喷的时代,无线路由器成为家庭中最重要的电器设备.稳定性.连接速度.信号强弱都是无线路由使用体验的重要组成部分.究竟如何选购与配置路由器才能得到最好的用户体验呢? 当你在选购无线路由器的时候是 ...

  8. [mvc] 过滤器filter一览

    1.mvc的过滤器种类

  9. OraclePLSQL编程

    PL/SQL编程 pl/sql(procedural language/sql)是Oracle在标准的sql语言上的扩展.pl/sql不仅允许嵌入式sql语言,还可以定义变量和常量,允许使用条件语句和 ...

  10. unicode、utf8、字符串字面值

    发现好多新人都不明白,或者说没有直观的感受,其实很简单. 简单的说,unicode是一种将全球文字都涵盖的字典 - 可以认为每个字符都有一个数字索引. 比如可以这样(假设):'a' 的索引是13,'我 ...