当前位置: 首页 > news >正文

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"

指定哪一个导出应该被暴露为一个库。默认为 undefined,将会导出整个(命名空间)对象

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里面使用

场景&#xff1a;我是小程序中使用wxmp-rsa库进行加密&#xff0c;然后在html里面解密 我就想把wxmp-rsa库打包到一个js里面&#xff0c;然后在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&#xff1f;Spring MVC的主要组件&#xff1f;springMVC工作原理/流程MVC框架 今天以这篇文章简单和大家聊聊springMVC相关的内容&#xff0c;和原理&#xff0c;以及框架&#xff1b; springMVC 什么是Spring MVC&#xff1f; Spring MV…...

【论文阅读】TACAN:控制器局域网中通过隐蔽通道的发送器认证

文章目录 摘要一、引言二、相关工作三、系统和对手模型3.1 系统模型对手模型 四、TACAN4.1 TACAN 架构4.2 发送方认证协议4.3 基于IAT的隐蔽通道4.4 基于偏移的隐蔽通道&#xff08;本节公式格式暂未整理&#xff09;4.5 基于LSB的隐蔽通道 摘要 如今&#xff0c;汽车系统与现…...

C语言第三十五弹---打印九九乘法表

C语言打印九九乘法表 思路&#xff1a;观察每一行可以看出乘号右边的一行值都是相同的&#xff0c;而乘号左边不断变化&#xff0c;所以使用嵌套循环&#xff0c;控制好 乘号左右值变化的条件即可。 #include <stdio.h>int main() {for (int i 1; i < 9; i){for (in…...

线性代数的艺术

推荐一本日本网友Kenji Hiranabe写的《线性代数的艺术》。这本书是基于MIT大牛Gilbert Strang教授的《每个人的线性代数》制作的。 虽然《线性代数的艺术》这本书仅仅只有12页的内容&#xff0c;就把线性代数的重点全画完了&#xff0c;清晰明了。 《线性代数的艺术》PDF版本&…...

基于注解配置的AOP

注解方式AOP基本使用 Spring的AOP也提供了注解方式配置&#xff0c;使用相应的注解代替之前的xml配置。 xml配置&#xff1a; <aop:config> <!-- 配置切入点 目的是指定哪些方法增强--><aop:pointcut id"myPointCut1" expression"execu…...

【Qt】QStackedWidget、QRadioButton、QPushButton及布局实现程序首页自动展示功能

效果 在程序启动后&#xff0c;有时不会进入到工作页面&#xff0c;会进入到产品展示页面。 动画如下&#xff1a; 首页展示 页面操作 当不点击时&#xff0c;一秒自动刷新一次&#xff1b;当点击时&#xff0c;会自动跳转到对应页面&#xff1b;点击上一页、下一页、及跳转页…...

探索 V8 引擎的内部:深入理解 JavaScript 执行的本质

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…...

单片机学习11——矩阵键盘

矩阵键盘&#xff1a; 这个矩阵键盘可以接到P0、P1、P2、P3都是可以的。 使用矩阵键盘是能节省单片机的IO口。 P3.0 P3.1 P3.2 P3.3 称之为行号。 P3.4 P3.5 P3.6 P3.7 称之为列号。 矩阵键盘检测原理&#xff1a; 1、检查是否有键按下&#xff1b; 2、键的抖动处理&#xf…...

Java游戏 王者荣耀

GameFrame类 所需图片&#xff1a; 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…...

接口测试场景:怎么实现登录之后,需要进行昵称修改?

在接口测试中有一个这样的场景&#xff1a;登录之后&#xff0c;需要进行昵称修改&#xff0c;怎么实现&#xff1f; 首先我们分别看下登录、昵称修改的接口说明&#xff1a; 以上业务中补充一点&#xff0c;昵称修改&#xff0c;还需要添加请求头Authorization传登录获取的to…...

石油化工专业MR仿真情景教学演练

首先&#xff0c;MR混合现实情景实训教学系统为学生提供了一个高度仿真的学习环境。在这个环境中&#xff0c;学生可以亲自操作设备&#xff0c;进行模拟实验&#xff0c;甚至可以体验到工业事故的模拟情景&#xff0c;从而更好地理解工艺流程的复杂性和安全性。这种沉浸式的学…...

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幻灯片,如何有效保护文件安全?

【幻灯片解密、去除密码、找回密码指南】 具体步骤如下&#xff1a;第一步百度搜索【密码帝官网】&#xff0c;第二步在用户中心上传需要解密的文件即可。 你是否有遇到过打开一个PPT文件却发现它被去除了密码无法编辑的情况&#xff1f;别担心&#xff0c;将为您提供最简单的解…...

优化前端性能

一次在前端面试中问到优化前端性能的方式 一、主要通过两种方式&#xff1a; reflow(回流)和repaint(重绘)。整个在浏览器的渲染过程中&#xff08;页面初始化&#xff0c;用户行为改变界面样式&#xff0c;动画改变界面样式等&#xff09;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. 问题记录&#xff1a;无法打开源文件"stdio.h"2. 问题记录&#xff1a;调试和执行按钮…...

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实现开关控制灯泡亮灭

效果&#xff1a; 开关控制灯的亮灭 目录 1.找到引脚组别(DEFG) led灯硬件结构 开关硬件结构 2.时钟使能 3.GPIO时钟控制 4.控制实现思路 5. 完整代码 6.视频演示 1.找到引脚组别(DEFG) 开关的引脚组别--E&#xff1b;LED灯的引脚组别--F led灯硬件结构 开关硬件结构…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...