概述
在前端开发中，很多时候需要在网站或移动应用中使用二维码。此时，我们可以使用 qrcode-webpack-plugin 这个 npm 包来快速生成二维码，方便我们的开发和测试。
qrcode-webpack-plugin 是一个 webpack 插件，它基于 qr.js 库，在编译时生成二维码图片。我们可以将生成的二维码图片嵌入到 HTML 页面中，或者在终端中将二维码输出为 ASCII 码，方便我们在测试时快速扫描二维码。
安装
在使用 qrcode-webpack-plugin 之前，我们需要先安装它。可以通过 npm 来安装：
npm install --save-dev qrcode-webpack-plugin
配置
安装完成之后，在 webpack 的配置文件中引入插件，并对插件进行一些简单的配置。下面是一个示例的 webpack 配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------- - - ---------------------------------
-------------- - -
------ ----------------
------- -
--------- -------------------
----- ----------------------- -------
--
-------- -
--- ------------------- --------- ------------------ ---
--- ---------------------
-- ----------- ------------------ ---
----- -------------------------------
-- -----
----- ---------------------------
-- -----
----- ---
--
-
--在以上的配置中，我们首先引入了 qrcode-webpack-plugin 包和 HtmlWebpackPlugin 包。然后在 plugins 中加入了两个插件，其中 QrcodeWebpackPlugin 即为我们要使用的插件。
在 QrcodeWebpackPlugin 的配置中，我们可以设置以下三个参数:
- name：生成的二维码图片文件的输出路径，可以包含文件名和文件后缀。
- text：二维码的内容。
- size：二维码的尺寸。
此外，我们还可以通过在 HtmlWebpackPlugin 的配置中指定生成的 HTML 文件，来将生成的二维码嵌入到 HTML 页面中。
使用
配置完成之后，我们可以使用 webpack 来编译项目并生成二维码图片。
npx webpack
在编译成功之后，我们会在 output.path/qrcode 目录下看到生成的二维码图片文件。
对于 HTML 页面来说，我们可以使用 img 标签来将二维码嵌入到页面中。
<!-- index.html --> <body> <img src="./qrcode/example.png" alt="example"> </body>
对于终端输出来说，我们可以使用 qr-image 库来将 ASCII 码输出到终端中。需要注意的是，二维码尺寸在终端输出时会被自动缩放，因此需要调整 size 参数的值。
const qr = require('qr-image');
const code = qr.imageSync('https://www.example.com/', { type: 'png', size: 10 });
console.log("\n" + code.toString('utf-8') + "\n");结论
使用 qrcode-webpack-plugin 可以方便地生成二维码图片，并将其嵌入到 HTML 页面中或者在终端中输出为 ASCII 码。它能够方便地满足前端开发中的二维码需求，为我们的开发和测试提供了很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733e890c4f72775835df