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的特点就是啥都有,爱用哪个用哪个,所以市面上的运算符基本都有. 算术运算 ...
随机推荐
- PlayMaker Play Sound 和 Audio Play
这两个 Action 都可以播放声音 *Play Sound:只要把声音拖进去就可以: *Audio Play:要求游戏对象要有Audio Source组件.
- DRF之注册响应分页组件
注册器 注册器的作用就是以后我们不用自己手动的一条条的敲路径了,它可以帮助哦们直接去找对应的路由,不用传参了,知道这一点就可以了,不多说还是,上代码实例 第一步:导入模块from django.url ...
- hbase常识及habse适合什么场景
当我们对于数据结构字段不够确定或杂乱无章很难按一个概念去进行抽取的数据适合用使用什么数据库?答案是什么,如果我们使用的传统数据库,肯定留有多余的字段,10个不行,20个,但是这个严重影响了质量.并且如 ...
- jQuery源码浅析2–奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- js弹出页面
建立一个HTML文件,输入以下代码就能弹出页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 链表例题2:链表的倒数第k个节点是多少
解题思想: 1.创建一个结点类(为后面实现链表做基础) 2.创建一个查询倒数元素的方法 3.使用快慢指针的思想(主要的部分) 图中的表示的是查询倒数第k个结点的操作: 创建一个快慢指针后pre(慢指针 ...
- Spring课程 Spring入门篇 1-1Spring入门课程简介
课程链接: 课程简介: 1 什么是框架 2 Spring简介 3 IOC(配置,注解) 4 Bean(配置,注解) 5 AOP(配置,注解,AspectJ.API) SpringFrameWork 常 ...
- 自写Jq动画载入插件
在写网站的时候,有一些dom第一次进入屏幕时需要加一个动画进入效果,如下图 于是,自己就研究下,要是实现gif图中左图效果大致原理就是首先将dom放在他的左侧,并将他的透明度(opacity)设置为0 ...
- Sass基础(二)
五.嵌套 在Sass中,嵌套有三种方式:选择器嵌套.属性嵌套.伪类嵌套 1.选择器嵌套 2.属性嵌套 3.伪类嵌套 六.混合宏 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到目的了 ...
- cube.js 开源模块化分析框架
cube.js 是一款很不错的模块化web 应用分析框架.cube.js 的设计主要是面向serverless 服务, 但是同时也支持所有rdbms, cube.js不是一个单体应用,包含了以下部分: ...