Recently, when I was learning the use of Webpack, I found that the webpack-replace-loader configuration regex does not work. After debugging the plug-in, I found that the search key does not support the writing method of regex, and then changed to string-replace-loader plug-in. The loader’s search key supports regular writing, and the problem is resolved. Here is a record of loader debugging method:

You need to prepare the Node environment first

Step 1: Download the global Install Node-Nightly

   npm install -g --save-dev node-nightly
Copy the code

Step 2: Add debugging commands

 "node-nightly": "node-nightly --inspect-brk ./node_modules/webpack/bin/webpack.js".Copy the code

The third step: Run NPM run node-nightly from the command line

The fourth step: Open Google Chrome and type chrome://inspect/# Devices in the URL

Click Inspect to go to the debug page

Step 5Node_module: finds the loader’s index.js file in vscode and adds the debugger to the module.exports function.

You can debug loader scripts as you normally debug JS scripts.