How to debug loader plugin in webpack project

Recently, when I was learning how to use webpack, I found that the webpack-replace-loader configuration regular expression did not work. After debugging the plug-in, I found that the search key value did not support regular expression writing. Later, I switched to the string-replace-loader plug-in. The search key value of this loader supports regular expression writing, and the problem was solved. Here is the debugging method of loader:

First you need to prepare the node environment

Step 1: Download and install node-nightly globally

npm install -g --save-dev node-nightly

Step 2: Add debugging commands

 "node-nightly": "node-nightly --inspect-brk ./node_modules/webpack/bin/webpack.js",

Step 3: npm run node-nightly in the command line

Step 4: Open Google Chrome and enter chrome://inspect/#devices in the URL

Click inspect to enter the debugging page

Step 5: Find the index.js file of loader in node_module in vscode, and add debugger in the module.exports function;

At this point, you can debug the corresponding loader script as you normally debug js.

This is the end of this article on how to debug loader plugins in webpack projects. For more information about webpack debugging loader plugins, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!