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. 【20180111】【物流FM专访】贝业新兄弟李济宏:我们是如何做到大件家居B2C物流第一的?

    在2017年的双11中,贝业新兄弟承接了日日顺家装和卫浴行业的仓储和配送,上海仓和武汉仓双十一期间及时出库率为100%,KPI位列第一:此外,贝业新兄弟还是科勒18年以来中国区唯一的物流服务商以及宜家 ...

  2. Intel Fortran 调用Delphi编制的DLL

    module link_cont interface subroutine I_FileOpenCont (ncase,ndata,lpool,xfiles) integer(kind=) :: nc ...

  3. 移动开发常用meta设置

    <!-- 视图窗口,移动端特属的标签. --> <meta name="viewport" content="width=device-width,in ...

  4. docker下创建crontab定时任务失败

    创建过程 基础镜像采用的centos7.2,需要安装一下crontab,在dockerfile中加以下语句就可以了: # crontab jobs RUN yum -y install crontab ...

  5. netstat实现原理

    因为最近接手的项目是基于嵌入式Linux openwrt的,一开始以为会跟之前的服务器开发没什么大的区别,但是遇到问题去分析的时候才发现,工具链还是有些差别的,openwrt的netstat是属于一个 ...

  6. GRE封装解封装过程

    GRE(Generic Routing Encapsulation,通用路由封装)协议是对某些网络层协议(IPX, AppleTalk, IP,etc.)的数据报文进行封装,使这些被封装的数据报文能够 ...

  7. Swagger UI 与SpringMVC的整合 II

    pom.xml <!-- swagger开始 --> <dependency> <groupId>io.springfox</groupId> < ...

  8. 加入ffmpeg播放视屏

    下面的字反了..,另外没声音 2018-4-28 前段时间已经做的差不多了,音频的pack取出来用openAL播放,并实现了视屏同步播放,并且支持unity 现在的问题就是支持大分辨率视屏播放的问题, ...

  9. ZOJ 3886 Nico Number(筛素数+Love(线)Live(段)树)

    problemCode=3886">ZOJ 3886 题意: 定义一种NicoNico数x,x有下面特征: 全部不大于x且与x互质的数成等差数列,如x = 5 ,与5互素且不大于5的数 ...

  10. 使用Python启动一个简单的服务器

    在 Linux 服务器上或安装了 Python 的机器上,Python自带了一个WEB服务器 SimpleHTTPServer,我们可以很简单的使用  python -m SimpleHTTPServ ...