默认 webpack 导出都是这样的结构,一个自执行函数的形式。

(() => {return {name: 'jack',age: 24,};
})();

没有赋值操作,所以其他文件没法引用该对象。加了 library 和 libraryTarget 之后的 webpack 配置:

output: {...library: 'finalModule',libraryTarget: 'var',
},
var finalModule = (() => {return {name: 'jack',age: 24,};
})();

特点:有赋值操作,赋值给 library 定义的变量。所以 libraryTarget: 'var' 的含义就是作为全局变量,具体变量的名字叫什么是通过 library 来定义的。

libraryTarget: 'assign' 的 webpack 配置:

output: {...library: 'finalModule',libraryTarget: 'assign',
},
finalModule = (() => {return {name: 'jack',age: 24,};
})();

特点:赋值给全局变量, 可能会覆盖宿主环境下同名的变量名,因为我们看到变量是直接使用的,并没有通过 var 去声明,和第一种还是有区别。

libraryTarget: 'this' 的 webpack 配置:

output: {...library: 'finalModule',libraryTarget: 'this',
},
this.finalModule = (() => {return {name: 'jack',age: 24,};
})();

通过对象属性暴露,这里是 this 对象,属性是通过 library 来定义的。

当然我们也可以挂在到 window 对象上。

output: {...library: 'finalModule',libraryTarget: 'window',
},
window.finalModule = (() => {return {name: 'jack',age: 24,};
})();

当然我们也可以挂在到 global 对象上。

output: {...library: 'finalModule',libraryTarget: 'global',
},
global.finalModule = (() => {return {name: 'jack',age: 24,};
})();

我们还可以定义在导出的对象上,方便其他库导入进来使用。

output: {...library: 'finalModule',libraryTarget: 'commonjs',
},
exports.finalModule = (() => {return {name: 'jack',age: 24,};
})();

还有默认导出,使用 libraryTarget 为 commonjs2 这个属性。此时 library 配置的字段会失效。所以我们可以省略。

output: {...libraryTarget: 'commonjs',
},
 module.exports = (() => {return {name: 'jack',age: 24}
})());

这是 commonJS 规范,还有 amd 规范的形式。

output: {...library: 'finalModule',libraryTarget: 'amd',
},
define('finalModule', [], () => {return (() => {return {name: 'jack',age: 24,};})();
});

太多了!!!

webpack中library和libraryTarget详解相关推荐

  1. webpack打包后引用cdn的js_利用CDN加速react webpack打包后的文件详解

    此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置) ...

  2. 【JavaScript 教程】ES6 中的 Promise对象 详解

    [JavaScript 教程]ES6 中的 Promise对象 详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...

  3. html5代码转换为视频,HTML5中的视频代码详解

    摘要 腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...

  4. VMware虚拟机文件夹中各文件作用详解

    VMware虚拟机文件夹中各文件作用详解 虚拟机的文件管理由VMware Workstation来执行. 一个虚拟机一般以一系列文件的形式储存在宿主机中, 这些文件一般在由workstation为虚拟 ...

  5. C++中substr()函数用法详解

    C++中substr()函数用法详解 原型: string substr (size_t pos = 0, size_t len = npos) const; 返回一个新构造的string对象,其值初 ...

  6. php中 继承中的概念,JavaScript_JavaScript中的继承方式详解,js继承的概念 js里常用的如下 - phpStudy...

    JavaScript中的继承方式详解 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于 ...

  7. Java中的static关键字详解

    ** Java中的static关键字详解 ** 在一个类中定义一个方法为static,即静态的,那就是说无需本类的对象就可以调用此方法.调用一个静态方法就是 "类名.方法名" ,静 ...

  8. java多线程中的join方法详解

    java多线程中的join方法详解 方法Join是干啥用的? 简单回答,同步,如何同步? 怎么实现的? 下面将逐个回答. 自从接触Java多线程,一直对Join理解不了.JDK是这样说的:join p ...

  9. java中匿名内部类详解_java 中匿名内部类的实例详解

    搜索热词 java 中匿名内部类的实例详解 原来的面貌: class TT extends Test{ void show() { System.out.println(s+"~~~哈哈&q ...

最新文章

  1. Django博客系统(短信验证码)
  2. Nature: 拟南芥微生物组功能研究1培养组学—高通量细菌分离培养鉴定
  3. 多线程处理器 适用于 已知要处理任务的个数,进行多线程处理
  4. 【floyd存字典序路径】【HDU1385】【Minimum Transport Cost】
  5. .net core 使用redis 基于 StackExchange.Redis
  6. oracle distinct分页优化_Oracle SQL性能优化最常用的40条建议
  7. IDEA——必备插件指南
  8. 同为EA888发动机,迈腾和奥迪A4L,为何差价10万多?
  9. Sparrow - Distributed, Low Latency Scheduling
  10. 100个MySQL 的调节和优化的提示
  11. 智能指针和自定义删除器
  12. extern 关键字详解
  13. 黑马程序员_常见的几个运行时异常
  14. 根据CTP接口计算现手、增仓、开平、对手盘 (1)
  15. 2020计算机考研英语国家线,2020考研英语国家分数线?
  16. Fibo Rule规则引擎可视化
  17. python中len函数_len()函数以及Python中的示例
  18. mysql 实现异地同步_MySQL 异地同步问题
  19. 商品货架管理(愿疫情早日消散,大家去见想见的人)
  20. 图片上传系统在淘系中的实践

热门文章

  1. 独家对话华为王成录:手机 HarmonyOS 开发者 Beta 版将如约而至
  2. WebAssembly 将成为互联网的终结?
  3. 天猫京东618下单金额近万亿;苹果或选择印度组装新款iPhone SE;Adobe将于12月31日终止支持Flash| 极客头条...
  4. Java 13 新特性全面解读
  5. 你的早鸟票特权仅剩2天!百度、快手、商汤、图森等重磅嘉宾确认出席AI ProCon 2019...
  6. 百度回应“抄袭天猫精灵”;ofo 押金退完需 12 年;VS Code 1.36 发布 | 极客头条...
  7. 手把手带你走进卷积神经网络!
  8. 2 万字全面测评深度学习框架 PaddlePaddle、TensorFlow 和 Keras | 程序员硬核评测
  9. 一封遗失信件成就的科技亿万富翁
  10. 直接拿来用!GitHub 上那些值得你 Star 的开源项目!