Description of mobile phone debug mode

I saw a mobile terminal debugging program written by my colleague. I feel it is very easy to use. Sum up

Wepack comes with mobile debugging

Wepack mobile debugging –host 0.0.0.0

NPM run start" start": "webpack serve --host 0.0.0.0"Copy the code

Run the project directly to the local project in the form of IP proxy out, so that the mobile phone can also access the address: http://0.0.0.0/index

Problem: Request interface needs to specify domain name request (proxy domain name solution)

Debug mode for evolution

On the basis of the above, nginx forwards the file request path to the local service path through the corresponding server (for example, test.com)

Implementation scheme:

Splicing url links? HMR = 1 & IP = 0.0.0.0 such as: http://0.0.0.0/index? HMR = 1 & IP = 0.0.0.0

Server side Nginx does judgment HMR secondary forwarding,

nginx.config:

. location ~ ^/app/spa/(.*?) / {if ( $arg_hmr = 1) {// Determine whether to enable forwarding
      proxy_pass http://$arg_ip$uri? $args;
      #return 302 http://$arg_ip;
      break;
    }
    root /home/site/static/web-static/service;
    #return 408;
    try_files $uri $uri/ /app/spa/$1/index.html; }...Copy the code

Concatenate references on files when starting local services? HMR = 1 & IP = 0.0.0.0

A Webpack plug-in (plugins) is a JavaScript object with apply methods. The Apply method is called by the Webpack Compiler and the Compiler object is accessible throughout the compile life cycle

webpack.config:

const MobileDebugPlugin = require('./plugins/MobileDebugPlugin')...plugins: [...new MobileDebugPlugin(),
...

Copy the code

MobileDebugPlugin:

const internalIp = require('internal-ip')
const qrcode = require('qrcode-terminal')
class MobileDebugPlugin {
  apply(compiler) {
    if(! process.env.MOBILE_BUG)return
    const ip = process.env.LOCAL_IP || internalIp.v4.sync()
    / / mobileDebug hook
    compiler.hooks.initialize.tap('mobileDebug'.() = > {
      compiler.options.devServer.sockHost = ip
      compiler.options.devServer.port = '80'
      compiler.options.devServer.host = '0.0.0.0'
      compiler.options.output.filename = `js/[name].js? [hash]&hmr=1&ip=${ip}`
      compiler.options.output.chunkFilename = `js/[name].js? [hash]&hmr=1&ip=${ip}`
      compiler.options.output.hotUpdateChunkFilename = `[id].[fullhash].hot-update.js? hmr=1&ip=${ip}`
      compiler.options.output.hotUpdateMainFilename = `[runtime].[fullhash].hot-update.json? hmr=1&ip=${ip}`
      for (const rule of compiler.options.module.rules){
        if (rule.type === 'asset') {if (rule.generator.filename.indexOf(ip) === -1){
            rule.generator.filename += rule.generator.filename.indexOf('? ') > -1 ? `&hmr=1&ip=${ip}` : `? hmr=1&ip=${ip}`
          }
        }
      }
    })

    compiler.hooks.done.tap('finish'.() = > {
      setTimeout(() = > {
        console.log('\n')
        const url = `http://testn1.dengtacourse.com/app/spa/dengta_activity/index?hmr=1&ip=${ip}`
        qrcode.generate(url, {small: true})
        console.log('Currently in real debug mode \n')
        console.log('Please scan the QR code to open the link \n')
        console.log('or copy the link open:' + url)
      })
    })
  }
}

module.exports = MobileDebugPlugin

Copy the code

Files with HMR = 1&IP = imported from online domain names are forwarded to the local

Test.com? HMR =1& IP =0.0.0.0 can be real-time check local code problem solved: all requests still point to the online server