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也可以使用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=" 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>