場景：我是小程序中使用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配置才明白。