Carefree: A Wi‑Fi‑Free Mobile Web Real‑Device Testing Solution Using Whistle and @nutui/carefree Webpack Plugin

In many enterprises, mobile web real‑device testing requires the phone to access files on the developer's computer, which traditionally forces developers to create a personal Wi‑Fi hotspot—a practice prohibited by security policies and cumbersome in daily work.

The proposed solution replaces the hotspot with a two‑part system: a server‑side Whistle proxy that provides both HTTP proxy services and a web UI, and a Webpack plugin @nutui/carefree (named “Carefree”) that automates watch‑mode compilation, incremental upload to an internal server (via SSH or FTP), and QR‑code generation for quick phone access.

How it works : Whistle runs on an internal Linux server, exposing an HTTP proxy that the phone can connect to and a web interface that the developer can open in a browser. The @nutui/carefree plugin modifies the Webpack configuration to watch source files, compile only changed parts, automatically upload the output to the same server, and print a QR code with the entry page URL. Scanning the QR code on the phone instantly loads the updated page.

Installation :

Install the plugin: npm install @nutui/carefree --save-dev

Add a custom script to package.json such as "carefree-dev": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress"

Import and register the plugin in webpack.config.js :

const Carefree = require('@nutui/carefree');
webpackConfig.plugins = [
  new Carefree({ /* plugin options */ })
];

Run the workflow with npm run carefree-dev . The terminal will display the entry page URL and a QR code; scanning the code on a phone (connected to the internal network) opens the page. Any file change triggers incremental compilation and upload, updating the QR code automatically.

Benefits include eliminating hotspot usage, reducing resource consumption on developers' machines, simplifying team collaboration (a single set of Whistle rules shared across the project), and providing fast, automated feedback loops. The approach also supports hosts modification, cross‑origin handling, URL mapping, mock data, and error capture during mobile testing.

For projects that only need to test internal‑server or online H5 pages, the server‑side Whistle alone may suffice; the @nutui/carefree plugin is essential only when the phone must access local Webpack project resources.