An introduction to the concept of Webpack-dev-server's principle of Xiao Kee

Using Devserver

Provide HTTP services instead of using local file previews

Monitor file changes and automatically refresh Web pages for real-time preview

Support for Source Map for easy debugging

For these, the Webpack for us to consider well. Webpack Native Support the 2nd, 3 points above, combined with the official development tools Devserver can also be very convenient to do 1th. Devserver will start an HTTP server for the Service Web request, and will help auto Webpack, and accept Webpack issued a file change signal, through the WebSocket protocol automatically refresh the page to do real-time preview.

This means that Devserver-initiated HTTP server listens on port 8080, Devserver will stay in the background after boot, and access this URL will get index.html under the project root directory. When we open this address with a browser, we will find that the page is blank, the error reason is./dist/bundle.js loaded 404. At the same time, we will find that there is no file output to the Dist directory because devserver will save the Webpack built files in memory and must be accessed through the HTTP service in order to access the output files. Since Devserver ignores the Output.path attribute configured in Webpack.config.js, the correct URL to get Bundle.js is Http://localhost:8080/bundle.js

Webpack can turn on the listening mode at startup, then Webpack will listen to changes in the local filesystem and rebuild new results when changes occur. Webpack turn off the listening mode by default, we can turn on the listening mode by--watch when the Webpack is started.

Webpack initiated via Devserver will turn on listening mode, re-execute the build when changes occur, and then notify Devserver. Devsserver will allow Webpack to inject a proxy client into the built-in JavaScript code to control the Web page, and the Web page and Devserver communicate via WebSocket protocol to facilitate devserver to proactively send instructions to the client. Devserver controls the page refresh by injecting the client when it receives notification of file changes from Webpack.

If you try to modify the index.html file and save, then we will find that this does not trigger the above mechanism, the cause of this problem is that Webpack in the configuration entry as the portal to recursively parse out the entry depends on the file, only entry itself and dependent files will be Webpack added to the listener list. The index.html file is out of JavaScript's modular system, so Webpack doesn't know it exists.

Support for Source Map

The JavaScript code that runs in the browser is code that is output by the compiler, and the code is poorly readable. If you encounter a Bug that does not know the cause during development, we may need to debug the breakpoint to find the problem. It is hard and not graceful to debug a power outage on the code that the compiler outputs, and the debug tool can map the code through the source map, allowing us to debug the breakpoint on the original code. Webpack supports generating a Source Map with only the--devtool Source-map parameter at startup. Refresh the page after restarting Devserver, open the Chrome Browser developer tool, you can see the debug source in the Sources bar

An introduction to the concept of Webpack-dev-server's principle of Xiao Kee