webpack打包三方库直接在html里面使用

场景:我是小程序中使用wxmp-rsa库进行加密,然后在html里面解密

我就想把wxmp-rsa库打包到一个js里面,然后在html里面直接引入使用。

webpack配置

javascript 复制代码
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也可以使用localhost
    host: "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>

相关推荐
RainbowSea18 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴24 分钟前
笨方法学python -练习14
java·前端·python
Mintopia31 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia41 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务