目录
场景
webpack配置
拓展
1
2
拓展 HtmlWebpackPlugin
场景
我在小程序中使用wxmp-rsa库进行加密，需要在html里进行解密。我就想把wxmp-rsa库打包到一个js里面，然后把html和js一起放到服务器，html再相对路径引入js文件。
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" | 指定哪一个导出应该被暴露为一个库。默认为 |
| globalObject: "window" | 当输出为 library 时，尤其是当 libraryTarget 为 'umd'时，此选项将决定使用哪个全局对象来挂载 library |
如果不设置libraryExport: "default"，那么打包后使用时候就需要JSEncrypt.default
比如 const rsa=new JSEncrypt.default()
如果设置了libraryExport: "default"，那么就可以直接使用const rsa=new JSEncrypt()
拓展
1
其实可以直接使用cnd方式引入
<script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/3.2.1/jsencrypt.min.js"></script>
这是因为wxmp-rsa就是根据jsencrypt封装的，所以可以直接使用jsencrypt进行解密。
2
网上查了老白半天也没找到正确打包姿势，然后拉jsencrypt源码发现人家的webpack配置才明白。
拓展 HtmlWebpackPlugin
new HtmlWebpackPlugin({
template: "./src/index.ejs",
scriptLoading: "blocking",
}),| scriptLoading | 加载方式 | 引入js方式 |
| blocking | 生成的html引入的js为同步加载 | <script src="jsencrypt.js"></script> |
| defer | 生成html引入的js为非阻塞加载（默认值为defer） | <script defer="defer" src="jsencrypt.js"></script> |
| module | 生成html引入的js为非阻塞加载 | <script type="module" src="jsencrypt.js"></script> |
项目中一般使用blocking方式引入打包好的js。
推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩
