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",}),],
};

最主要配置

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配置才明白。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/161141.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MybatisPlus】简介与使用

MyBatisPlus 1.简介 MyBatisPlus&#xff08;简称MP&#xff09;是一个MyBatis的增强工具&#xff0c;在MyBatis的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生 官网&#xff1a;https://baomidou.com/ MyBatis-Plus特性&#xff1a; 无侵入&#xff1a;只…

C_1练习题

一、单项选择题(本大题共20小题,每小题2分,共40分。在每小题给出的四个备选项中,选出一个正确的答案&#xff0c;并将所选项前的字母填写在答题纸的相应位置上。) 若 x 为int 型变量,则执行以下语句后,x的值为(&#xff09; x5; xx*x; A. 25 B.-20 C. 20 D.-25 若x、i、j、k都…

C#学习相关系列之Linq用法---group和join相关用法(三)

一、Group用法 在C#的LINQ中&#xff0c;Grou将集合中的元素按照指定的键进行分组。Group方法返回一个IEnumerable<IGrouping<TKey, TElement>>类型的集合&#xff0c;其中TKey表示分组的键类型&#xff0c;TElement表示集合中元素的类型。每个IGrouping<TKey, …

php如何实现文件上传

php实现文件上传需要通过全局变量&#xff08;数组&#xff09;&#xff1a;$_FILES 结合 move_uploaded_file 函数来实现。 move_uploaded_file函数&#xff08;只对POST方式生效&#xff09;&#xff1a; 其中move_uploaded_file函数语法&#xff1a;move_uploaded_file(需要…

Vue生成二维码并进行二维码图片下载

1、安包 npm install vue-qr --save2、引入 // vue2.0 import VueQr from vue-qr // vue3.0 import VueQr from vue-qr/src/packages/vue-qr.vue new Vue({components: {VueQr} })<!-- 设备二维码 对话框 270px--><el-dialog title"点位二维码" :visible.…

超级签名封号掉签该怎么办

如果超级签名封号掉签了&#xff0c;可以考虑以下几种解决方法&#xff1a; 联系签名服务商&#xff1a;首先&#xff0c;可以联系签名服务商&#xff0c;了解封号的原因和解决方案。app封装打包可能会提供技术支持或帮助恢复签名。 检查签名配置&#xff1a;确认签名配置是否…

练习题——【学习补档】库函数的模拟实现

各种库函数的模拟实现 一、模拟实现strlen1.地址-地址型2.递归型3.计数器型 二、模拟实现strcpy三、模拟实现strcmp四、模拟实现strcat五、模拟实现strstr 一、模拟实现strlen 模拟实现strlen有三种方法 1.地址-地址型 2.递归型 3.计数器型1.地址-地址型 // //1.地址-地址型 …

云服务器-从零搭建前后端服务

使用须知 选择0M带宽不能访问公网&#xff08;不分配公网IP&#xff09;&#xff0c;如需分配公网IP请增加带宽值。云服务器ECS默认不开启虚拟内存如您需要使用请登录云服务器内部操作。Linux开启swap&#xff08;虚拟内存&#xff09;、Windows虚拟内存的设置若您购买了数据盘…

含分布式电源的配电网可靠性评估matlab程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 参考文献&#xff1a; 基于仿射最小路法的含分布式电源配电网可靠性分析——熊小萍 主要内容&#xff1a; 通过概率模型和时序模型分别进行建模&#xff0c;实现基于概率模型最小路法的含分布式电源配电网…

web需求记录

需求1&#xff1a;根据后端传过来的设备名:DESKTOP-4DQRGQB&#xff0c;以及mac:e0:be:03:74:40:0b&#xff1b;iQOO-8&#xff0c;mac:b0:33:66:38:c3:25&#xff0c;用web option 是动态增加的&#xff08;也就是那个选择框里面的东西是根据后端传过来的值动态增加的&#xf…

upload-labs关卡12(基于白名单的%00截断绕过)通关思路

文章目录 前言一、靶场需要了解的前置知识1、%00截断2、0x00截断3、00截断的使用条件1、php版本小于5.3.292、magic_quotes_gpc Off 二、靶场第十二关通关思路1、看源代码2、bp抓包%00截断3、验证文件是否上传成功 总结 前言 此文章只用于学习和反思巩固文件上传漏洞知识&…

LL(1)语法分析程序设计与实现

制作一个简单的C语言词法分析程序_用c语言编写词法分析程序-CSDN博客文章浏览阅读322次。C语言的程序中&#xff0c;有很单词多符号和保留字。一些单词符号还有对应的左线性文法。所以我们需要先做出一个单词字符表&#xff0c;给出对应的识别码&#xff0c;然后跟据对应的表格…

国民新旅游时代,OTA们如何制胜新周期?

文 | 螳螂观察&#xff08;TanglangFin&#xff09; 作者 | 图霖 消费全面复苏的大背景下&#xff0c;旅游业正迎来预期中的拐点。 一个显著表现是&#xff0c;旅游消费正在从可选消费转化成必选消费。 国内消费者旅游需求的不降反增&#xff0c;就是最好的印证。 同程研究…

DoFaker: 一个简单易用的换脸工具

DoFaker: 一个简单易用的换脸工具 基于insightface开发&#xff0c;可以轻松替换视频或图片中的人脸。支持windows和linux系统&#xff0c;CPU和GPU推理。onnxruntime推理&#xff0c;无需pytorch。 更新 2023/9/16 更新动作迁移算法2023/9/14 更新脸部增强算法(GFPGAN)和超分…

TypeScript枚举

1、数字枚举 enum Direction {Up,Down,Left,Right, } var Direction; (function (Direction) {Direction[Direction["Up"] 0] "Up";Direction[Direction["Down"] 1] "Down";Direction[Direction["Left"] 2] "L…

[点云分割] 基于颜色的区域增长分割

效果&#xff1a; 代码&#xff1a; #include <iostream> #include <thread> #include <vector>#include <pcl/point_types.h> #include <pcl/io/pcd_io.h> #include <pcl/search/search.h> #include <pcl/search/kdtree.h> #inclu…

AR道具特效制作工具

AR&#xff08;增强现实&#xff09;技术已经逐渐渗透到各个行业&#xff0c;为企业带来了全新的营销方式和用户体验。在这个背景下&#xff0c;美摄科技凭借其强大的技术实力和创新精神&#xff0c;推出了一款专为企业打造的美摄AR特效制作工具&#xff0c;旨在帮助企业轻松实…

MIKE水动力笔记19_统计平均潮差

本文目录 前言Step 1 ArcGIS中创建渔网点Step 2 将dfsu数据提取到渔网点Step 3 Python统计平均潮差 前言 日平均潮差&#xff08;average daily tidal range&#xff09;&#xff1a;日高潮潮高合计之和除以实有高潮个数为日平均高潮潮高&#xff0c;日低潮潮高合计之和除以实…

Quartz .Net 的简单使用

参考了&#xff1a;c# .net framework 4.5.2 , Quartz.NET 3.0.7 - runliuv - 博客园 (cnblogs.com) https://www.cnblogs.com/personblog/p/11277527.html&#xff0c; Quartz.NET 作业调度&#xff08;一&#xff09;&#xff1a;Test - 简书 自己要轮询的任务&#xff1a…

NX二次开发UF_CAM_PREPRO_init_module 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CAM_PREPRO_init_module Defined in: uf_cam_prepro.h int UF_CAM_PREPRO_init_module(void ) overview 概述 Initializes the required environment for this module. 初始化此…