This article is intended for front-end developers who already know how to use WebPack, but would like to learn more about the details and progressions of WebPack.
First, I invite you to build a Hello World project for Webpack locally by following the steps in my previous Webpack 10-minute introduction.
The completed project structure is as follows:
Open index.html to see the Hello World string.
Here’s how to debug the packaging process for WebPack itself.
Suppose our requirement is to debug the webpack configuration file in the project folder: webpack.config.js
So let’s set a breakpoint inside:
1. Under the current WebPack project folder, run the following command:
node –inspect-brk ./node_modules/webpack/bin/webpack.js –inline –progress
The — inspect-brk argument starts Node in debug mode:
You will observe the output:
The Debugger listening on the ws: / / 127.0.0.1:9229/19421955-0 f12 – da – fa5dd8384e04 44 the c7-95
For help see nodejs.org/en/docs/ins…
2. Open Chrome, type Chrome ://inspect/#devices:
Click the hyperlink “Open Dedicated DevTools for Node “in the pop-up window.
In the command line window of the first step, a new prompt message appears: Debugger Attached.
The Chrome window pops up and the breakpoint stops at the first line of webpack.js. Before the webpack. Js is our specified command line parameters: the node – inspect – BRK. / node_modules/webpack/bin/webpack js – the inline – the progress
Then click “Continue” in the Chrome debugger, and the breakpoint is stored in the debugger breakpoint we set in webpack.config.js.
For more of Jerry’s original articles, please follow the public account “Wang Zixi “:
