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

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

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

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

做了一个很简单的 webpack 插件分享给大家看实现，非常简单，也可以自己实现。 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);
    })
  }
};

显示