前言

此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出

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这样的大型库,会导致文件过大,如果外部引入,按需引入,可以压缩应用大小。

参考文章: Webpack的externals的使用

笔记地址

Webpack4 学习笔记四 暴露全局变量、externals的更多相关文章

  1. C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  2. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  3. java之jvm学习笔记四(安全管理器)

    java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

  4. Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  5. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  7. muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制

    目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...

  8. python3.4学习笔记(四) 3.x和2.x的区别,持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  9. Go语言学习笔记四: 运算符

    Go语言学习笔记四: 运算符 这章知识好无聊呀,本来想跨过去,但没准有初学者要学,还是写写吧. 运算符种类 与你预期的一样,Go的特点就是啥都有,爱用哪个用哪个,所以市面上的运算符基本都有. 算术运算 ...

随机推荐

  1. F. Cooking Time 贪心

    http://codeforces.com/gym/101498/problem/F 对于知道使用情况的置换算法,最优解是找一个最后需要使用的物品替换掉 也就是,如果一个物品后面已经不需要用到,就要拿 ...

  2. Map集合练习之对字符串中字母出现的次数求和

    不多说,直接上干货! 代码需求 如有这么一个字符串 String str = "fdg+avAdc bs5dDa9c-dfs"; MapTest.java package zhou ...

  3. Ubuntu14.04-PXE搭建

    什么是PXE? PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从 ...

  4. GET和POST区别和用法

    很多人都分不清GET与POST的区别,以及什么时候用GET?什么时候用POST? GET和POST两种方法都是将数据送到服务器,但你该用哪一种呢? HTTP标准包含这两种方法是为了达到不同的目的.PO ...

  5. jQuery源码浅析2–奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  6. SpringBoot如何集成Jedis

    添加jedis依赖 在项目pom.xml文件中添加依赖 <!-- 添加jedis依赖 --> <dependency> <groupId>redis.clients ...

  7. linq 两个字段排序

    在linq中排序方法有: OrderBy()  --对某列升序排序 ThenBy()    --某列升序后对另一列后续升序排序 OrderByDescending() --对某列降序排序 ThenBy ...

  8. 国内外著名B2C系统介绍兼比较【收藏版】

    一.国内知名B2C系统 1.Shopex国内最大的电子商务系统,有各种辅助工具,php开发,免费但不开源,网店模板众多,较适合有淘宝店的卖家.网址:www.shopex.cn 2.ECshop免费且开 ...

  9. 多个ModelForm组合成一个表单

    打个比方: 我将用户的基本信息 如用户名密码存在继承了Django auth认证组件中的 AbstractUser 类的模型中,并和第二个存了Details模型中,此模型继承UserInfo模型 继承 ...

  10. 洛谷P3372 【模板】线段树 1(树状数组)

    题意 题目链接 Sol Get到了这题树状数组的做法,感觉非常nice 区间加:直接差分 区间求和:考虑每一位的贡献 \(sum_{i = 1}^x (x+1 - i) d_i\) \(= sum_{ ...