webpack打包三方库直接在html里面使用
场景:我是小程序中使用wxmp-rsa库进行加密,然后在html里面解密
我就想把wxmp-rsa库打包到一个js里面,然后在html里面直接引入使用。
webpack配置
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {devServer: {//配置服务端口号port: 6010,// 打开热更新开关hot: true,//服务器的IP地址,可以使用IP也可以使用localhosthost: "localhost",//服务端压缩是否开启compress: true,//打开浏览器open: true,},// JavaScript 执行入口文件entry: "./node_modules/wxmp-rsa/dist/index.js",output: {// 把所有依赖的模块合并输出到一个 bundle.js 文件// filename: "bundle.js",// 把输出文件都放到 dist 目录下path: path.resolve(__dirname, "./dist"),library: "JSEncrypt",libraryTarget: "umd",libraryExport: "default",globalObject: "window",filename: "jsencrypt.js",},// experiments: { outputModule: true },module: {rules: [{// 用正则去匹配要用该 loader 转换的 CSS 文件test: /\.css$/,use: ["style-loader",// MiniCssExtractPlugin.loader,{loader: "css-loader",},],},],},optimization: {minimizer: [new CssMinimizerPlugin()],minimize: true,},plugins: [new HtmlWebpackPlugin({template: "./src/index.ejs",scriptLoading: "blocking",}),],
};
最主要配置
| library: "JSEncrypt" | 输出一个库,为你的入口做导出。也就是可以直接在页面使用的变量名 |
| libraryTarget: "umd" | 将你的 library 暴露为 AMD 模块 |
| libraryExport: "default" | 指定哪一个导出应该被暴露为一个库。默认为 |
| globalObject: "window" | 当输出为 library 时,尤其是当 libraryTarget 为 'umd'时,此选项将决定使用哪个全局对象来挂载 library |
如果不设置libraryExport: "default",那么我们使用时候就需要JSEncrypt.default
比如 const rsa=new JSEncrypt.default();
如果我们设置了libraryExport: "default",那么就可以直接使用const rsa=new JSEncrypt();
其实我们可以直接使用cnd方式引入
<script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/3.2.1/jsencrypt.min.js"></script>
其实wxmp-rsa就是根据jsencrypt封装的,所以可以直接使用jsencrypt进行解密。
网上查了老白半天也没找到正确姿势,然后拉jsencrypt源码发现人家的webpack配置才明白。
扩展
new HtmlWebpackPlugin({
template: "./src/index.ejs",
scriptLoading: "blocking",
}),
scriptLoading设置为blocking那么生成的html引入的js为同步加载
<script src="jsencrypt.js"></script>
scriptLoading: "defer",生成html引入的js为非阻塞加载(默认值为defer)
<script defer="defer" src="jsencrypt.js"></script>
scriptLoading: "module",生成html引入的js为非阻塞加载
<script type="module" src="jsencrypt.js"></script>
相关文章:
webpack打包三方库直接在html里面使用
场景:我是小程序中使用wxmp-rsa库进行加密,然后在html里面解密 我就想把wxmp-rsa库打包到一个js里面,然后在html里面直接引入使用。 webpack配置 const path require("path"); const MiniCssExtractPlugin require("mini-…...
Redis使用increment方法返回null的原因以及解决方案
public static void main(String[] args) {redisTemplate.setEnableTransactionSupport(true); //开启事务支持redisTemplate.multi(); //标记事务块的开始redisTemplate.opsForValue().set("name","zs");redisTemplate.opsForValue().set("pass&qu…...
springMVC,什么是Spring MVC? Spring MVC的主要组件? springMVC工作原理/流程 MVC框架
文章目录 springMVC什么是Spring MVC?Spring MVC的主要组件?springMVC工作原理/流程MVC框架 今天以这篇文章简单和大家聊聊springMVC相关的内容,和原理,以及框架; springMVC 什么是Spring MVC? Spring MV…...
【论文阅读】TACAN:控制器局域网中通过隐蔽通道的发送器认证
文章目录 摘要一、引言二、相关工作三、系统和对手模型3.1 系统模型对手模型 四、TACAN4.1 TACAN 架构4.2 发送方认证协议4.3 基于IAT的隐蔽通道4.4 基于偏移的隐蔽通道(本节公式格式暂未整理)4.5 基于LSB的隐蔽通道 摘要 如今,汽车系统与现…...
C语言第三十五弹---打印九九乘法表
C语言打印九九乘法表 思路:观察每一行可以看出乘号右边的一行值都是相同的,而乘号左边不断变化,所以使用嵌套循环,控制好 乘号左右值变化的条件即可。 #include <stdio.h>int main() {for (int i 1; i < 9; i){for (in…...
线性代数的艺术
推荐一本日本网友Kenji Hiranabe写的《线性代数的艺术》。这本书是基于MIT大牛Gilbert Strang教授的《每个人的线性代数》制作的。 虽然《线性代数的艺术》这本书仅仅只有12页的内容,就把线性代数的重点全画完了,清晰明了。 《线性代数的艺术》PDF版本&…...
基于注解配置的AOP
注解方式AOP基本使用 Spring的AOP也提供了注解方式配置,使用相应的注解代替之前的xml配置。 xml配置: <aop:config> <!-- 配置切入点 目的是指定哪些方法增强--><aop:pointcut id"myPointCut1" expression"execu…...
【Qt】QStackedWidget、QRadioButton、QPushButton及布局实现程序首页自动展示功能
效果 在程序启动后,有时不会进入到工作页面,会进入到产品展示页面。 动画如下: 首页展示 页面操作 当不点击时,一秒自动刷新一次;当点击时,会自动跳转到对应页面;点击上一页、下一页、及跳转页…...
探索 V8 引擎的内部:深入理解 JavaScript 执行的本质
🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…...
单片机学习11——矩阵键盘
矩阵键盘: 这个矩阵键盘可以接到P0、P1、P2、P3都是可以的。 使用矩阵键盘是能节省单片机的IO口。 P3.0 P3.1 P3.2 P3.3 称之为行号。 P3.4 P3.5 P3.6 P3.7 称之为列号。 矩阵键盘检测原理: 1、检查是否有键按下; 2、键的抖动处理…...
Java游戏 王者荣耀
GameFrame类 所需图片: package 王者荣耀;import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import java.io.File; import java.util.ArrayList…...
接口测试场景:怎么实现登录之后,需要进行昵称修改?
在接口测试中有一个这样的场景:登录之后,需要进行昵称修改,怎么实现? 首先我们分别看下登录、昵称修改的接口说明: 以上业务中补充一点,昵称修改,还需要添加请求头Authorization传登录获取的to…...
石油化工专业MR仿真情景教学演练
首先,MR混合现实情景实训教学系统为学生提供了一个高度仿真的学习环境。在这个环境中,学生可以亲自操作设备,进行模拟实验,甚至可以体验到工业事故的模拟情景,从而更好地理解工艺流程的复杂性和安全性。这种沉浸式的学…...
Docker配置Halo搭建个人博客-快速入门
Docker配置Halo搭建个人博客-快速入门 1 官方文档2 安装Halo2.1 创建Halo主目录2.2 远程下载配置文件2.3 编辑配置文件2.4 拉取最新镜像2.6 查看容器2.7 开放服务器的防火墙 3 运行3.1 运行项目3.2 停止项目 4 常见问题4.1 没有权限4.2 ommand netstart not found, did you mea…...
禁止编辑的PPT幻灯片,如何有效保护文件安全?
【幻灯片解密、去除密码、找回密码指南】 具体步骤如下:第一步百度搜索【密码帝官网】,第二步在用户中心上传需要解密的文件即可。 你是否有遇到过打开一个PPT文件却发现它被去除了密码无法编辑的情况?别担心,将为您提供最简单的解…...
优化前端性能
一次在前端面试中问到优化前端性能的方式 一、主要通过两种方式: reflow(回流)和repaint(重绘)。整个在浏览器的渲染过程中(页面初始化,用户行为改变界面样式,动画改变界面样式等)reflow(回流)和repaint(重绘) 会大大影…...
1.1 C语言之入门:使用Visual Studio Community 2022运行hello world
1.1 使用Visual Studio Community 2022运行c语言的hello world 一、下载安装Visual Studio Community 2022 与 新建项目二、编写c helloworld三、编译、链接、运行 c helloworld1. 问题记录:无法打开源文件"stdio.h"2. 问题记录:调试和执行按钮…...
Android NDK开发中常用的gradle配置
文章目录 externalNativeBuild1.配置通用的 CMake 构建选项2.指定 CMakeLists.txt 文件的位置和 CMake 版本 指定ndk版本 externalNativeBuild 下面的gradle代码包含两个externalNativeBuild {} android {defaultConfig {externalNativeBuild {cmake {cppFlags ""}…...
【AUTOSAR-DoIP】通过 DoIP 进行符合 Autosar 的车辆诊断
前言 通信协议 DoIP(互联网协议诊断)可通过以太网、WLAN 和移动通信对系统进行灵活而强大的诊断:无论是车间外的诊断还是车载诊断,以及驾驶时的远程访问。 DoIP 可以通过多种方式使用:现代车辆中的电子控制系统高度互连并执行各种复杂的功能。 Autosar 支持的通信协议 Do…...
GPIO的使用--操作PE02 PE03 PE04实现开关控制灯泡亮灭
效果: 开关控制灯的亮灭 目录 1.找到引脚组别(DEFG) led灯硬件结构 开关硬件结构 2.时钟使能 3.GPIO时钟控制 4.控制实现思路 5. 完整代码 6.视频演示 1.找到引脚组别(DEFG) 开关的引脚组别--E;LED灯的引脚组别--F led灯硬件结构 开关硬件结构…...
python打卡day49
知识点回顾: 通道注意力模块复习空间注意力模块CBAM的定义 作业:尝试对今天的模型检查参数数目,并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
边缘计算医疗风险自查APP开发方案
核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面,避免重复抓取,以节省资源和时间。 在分布式环境下,增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路:将增量判…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
