分享:移动端测试让 webpack-dev-server 启动后显示二维码

因为要做移动端测试，所以经常执行一串操作。

• ifconfig
• 修改掉完整的 url
• 粘贴进浏览器
• 启动网页二维码插件

最近看到 rax-scripts 自己带了命令行输出二维码的操作，觉得也可以自己来实现这个功能。

做了一个很简单的 wepack 插件分享给大家看实现，非常简单，也可以自己实现。 webpack-server-qrcode

使用

var serverQRcode = require('webpack-server-qrcode'); { ... plugins:[ new serverQRcode() ] } 

原理

基于 qrcode-terminal-alpha 这个包在命令行下显示二维码。通过 os.networkInterfaces 获取 ip。通过 compiler.options.devServer.port 获取 webpack-dev-server 配置的端口号。

const qrcode = require('qrcode-terminal-alpha'); const os = require('os'); module.exports = class serverQRcode { constructor(options) { this.optiOns= options; this.qrcode = qrcode; } getIp(){ const ifaces = os.networkInterfaces(); let ips = []; for (const key in ifaces) { if (ifaces.hasOwnProperty(key)) { const nets = ifaces[key]; nets.forEach(net=>{ if(net.family === 'IPv4'){ const address = net.address; ips.push(address); } }) } } return ips; } printQRcode(url){ this.qrcode.generate(url,{small:true},(qrcode)=>{ console.log(qrcode); console.log(url); }) } apply(compiler) { const port = compiler.options.devServer.port; const ips = this.getIp(); ips.forEach(ip=>{ const url = `http://${ip}:${port}`; this.printQRcode(url); }) } }; 

显示