Webpack4 学习笔记四 暴露全局变量、externals
前言
此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出
webpack 暴露全局变量
- 通过 expose-loader 内联配置
- 在 webpack中配置
- 每个模块通过注入的方式
- 通过CDN的方式引入一个库,并通过 webpack在项目中优化
通过 expose-loader 内联配置
cnpm i jquery --save 安装 jquery库
import $ from 'jquery'
console.log($) // 可以访问
console.log(window.$) // undefined
expose-loader 加载程序向全局对象添加模块
cnpm i expose-loader --save-dev
将jquery暴露至全局并用$引用
webpack配置
入口文件
import $ from 'expose-loader?$!jquery'
console.log(window.$)
在 webpack中配置
module.exports = {
module: {
rules: [
{
test: require.resolve('jquery'),
loader: 'expose-loader?$'
}
]
}
}
入口文件直接引用jquery,也可以全局访问
import $ from 'jquery'
console.log(window.$)
每个模块通过注入的方式
webpack插件 ProvidePlugin
ProvidePlugin 自动加载模块, 而不必导出 import 或 require。
webpack配置
const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery'
})
]
}
通过CDN的方式引入一个库,并通过 webpack在项目中优化
如果我需要使用CDN的方式引入了好多工具库, 比如 jquery, echarts等等。
在模版文件中引入cdn工具库,。
如下配置:
// 入口文件
import $ from 'jquery'
console.log($)
//webpack配置
module.exports = {
externals: {
jquery: 'jQuery'
}
}
其实,我们使用这种方式的另一个目的是为了压缩工程大小,如果所有的依赖包都压缩打包到应用中,尤其是echart这样的大型库,会导致文件过大,如果外部引入,按需引入,可以压缩应用大小。
笔记地址
Webpack4 学习笔记四 暴露全局变量、externals的更多相关文章
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制
目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...
- python3.4学习笔记(四) 3.x和2.x的区别,持续更新
python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...
- Go语言学习笔记四: 运算符
Go语言学习笔记四: 运算符 这章知识好无聊呀,本来想跨过去,但没准有初学者要学,还是写写吧. 运算符种类 与你预期的一样,Go的特点就是啥都有,爱用哪个用哪个,所以市面上的运算符基本都有. 算术运算 ...
随机推荐
- F. Cooking Time 贪心
http://codeforces.com/gym/101498/problem/F 对于知道使用情况的置换算法,最优解是找一个最后需要使用的物品替换掉 也就是,如果一个物品后面已经不需要用到,就要拿 ...
- Map集合练习之对字符串中字母出现的次数求和
不多说,直接上干货! 代码需求 如有这么一个字符串 String str = "fdg+avAdc bs5dDa9c-dfs"; MapTest.java package zhou ...
- Ubuntu14.04-PXE搭建
什么是PXE? PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从 ...
- GET和POST区别和用法
很多人都分不清GET与POST的区别,以及什么时候用GET?什么时候用POST? GET和POST两种方法都是将数据送到服务器,但你该用哪一种呢? HTTP标准包含这两种方法是为了达到不同的目的.PO ...
- jQuery源码浅析2–奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- SpringBoot如何集成Jedis
添加jedis依赖 在项目pom.xml文件中添加依赖 <!-- 添加jedis依赖 --> <dependency> <groupId>redis.clients ...
- linq 两个字段排序
在linq中排序方法有: OrderBy() --对某列升序排序 ThenBy() --某列升序后对另一列后续升序排序 OrderByDescending() --对某列降序排序 ThenBy ...
- 国内外著名B2C系统介绍兼比较【收藏版】
一.国内知名B2C系统 1.Shopex国内最大的电子商务系统,有各种辅助工具,php开发,免费但不开源,网店模板众多,较适合有淘宝店的卖家.网址:www.shopex.cn 2.ECshop免费且开 ...
- 多个ModelForm组合成一个表单
打个比方: 我将用户的基本信息 如用户名密码存在继承了Django auth认证组件中的 AbstractUser 类的模型中,并和第二个存了Details模型中,此模型继承UserInfo模型 继承 ...
- 洛谷P3372 【模板】线段树 1(树状数组)
题意 题目链接 Sol Get到了这题树状数组的做法,感觉非常nice 区间加:直接差分 区间求和:考虑每一位的贡献 \(sum_{i = 1}^x (x+1 - i) d_i\) \(= sum_{ ...