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

目录

场景

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

最主要配置

如果不设置 libraryExport: “default”，那么打包后使用时候就需要 JSEncrypt.default

比如 const rsa=new  JSEncrypt.default()

如果设置了 libraryExport: “default”，那么就可以直接使用 const rsa=new  JSEncrypt()

拓展

1

其实可以直接使用 cnd 方式引入 

这是因为 wxmp-rsa 就是根据 jsencrypt 封装的，所以可以直接使用 jsencrypt 进行解密。

2

网上查了老白半天也没找到正确打包姿势，然后拉 jsencrypt 源码发现人家的 webpack 配置才明白。

拓展 HtmlWebpackPlugin

new HtmlWebpackPlugin({
      template: "./src/index.ejs",
      scriptLoading: "blocking",
}),

项目中一般使用 blocking 方式引入打包好的 js。

  推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩