debugging

To debug webPack source code, there are two ways:

  • A clone Webpack source package on Github for configuration debugging
  • One is debugging through the NPM package

The Clone WebPack is better for debugging the latest code and switching versions.

There are two ways to run the WebPack configuration:

  • One is throughwebpack-cliIn thewebpackCommand run debugging
  • One is to make the call manually by importing the WebPack entry fileconst webpack = require('webpack'); const complier = webpack(config); complier.run(() => {})

Different debugging methods are suitable for different running modes, as described below.

The WebPack version debugged in this document is 5.24.4

Clone debugging

First, find the source of Webpack through Github and clone it. Using HTTPS protocol to clone, the code is as follows:

  git clone https://github.com/webpack/webpack.git
  Go to the Webpack folder
  cd webpack
  You can use git to switch to the version you want to debug
  # git reset v4.30.0

  Install the NPM package
  npm i
Copy the code

Clone source code to create a new folder debug, to prevent source intrusion.

The debug folder

Create a folder named debug in the root directory. Ddebug contains the following directories:

-- webpack
  -- .vscode
    // used to debug node code in vscode
    -- launch.json
  -- debug
    // A file for packaging
    -- src
      -- index.js
    // Manually start the Webpack code
    -- start.js
    // Webpack configuration file
    -- webpack.config.js
Copy the code

Webpack.config. js is used to configure the webPack runtime configuration. The configuration of Webpack is quite complex and only the configuration used in the file is described here.

webpack.config.js

// Import the built-in path module of Node
const path = require('path')
Export the WebPack configuration
module.exports = {
    // Current debug directory
    context: __dirname,
    / / development mode
    mode: 'development'./ / configuration source - the map
    devtool: 'source-map'.// Set the entry file to index.js in the SRC file
    entry: './src/index.js'.// Export files in debug folder dist folder
    output: {
        path: path.join(__dirname, './dist'),},/ / configuration loader
    module: {
        rules: [{test: /\.js$/,
                use: ['babel-loader'].exclude: /node_modules/,}]}}Copy the code

The webpack.config.js file is mainly used for webpack initialization and runtime configuration.

start.js

// Import a block of webpack
const webpack = require('.. /lib/index.js')
// Import the webPack configuration object written above
const config = require('./webpack.config')
// Create a complier object
const complier = webpack(config)
// Execute the compiler.run method to start compiling the code, and the callback method is used to feedback the compilation status
complier.run((err, stats) = > {
  // If run error output error
  if (err) {
    console.error(err)
  } else {
    Stats webPack is a built-in compiler information object
    console.log(stats)
  }
})
Copy the code

Start. js is used to start the Webpack, which is debugged by manually importing webPack objects and manually initializing the Complier code. See how to compile the SRC /index.js file.

index.js

  import is from 'object.is'  // Introduce a small but beautiful third-party library to see how WebPack handles third-party packages
  console.log('Nice to meet you, Webpack.')
  console.log(is(1.1))
Copy the code

After configuring the above files, configure the configuration launch.json file for debugging node code in VSCode.

.vscode/launch.json

  {
    "version": "0.2.0"."configurations": [{// Specify the type of source to debug
        "type": "node"."request": "launch".// The name of the debug code
        "name": "Start the Webpack debugger".// Specify the entry file to launch the code
        "program": "${workspaceRoot}/debug/start.js"./ / output
        "console": "integratedTerminal"}}]Copy the code

After configuring the launch.json file, you can debug the breakpoint.

Once all the files are created, you can debug at the interrupt point. The main debug entry is to create complier objects in the webpack/lib/webpack.js folder.

The last

Whether you are debugging the node service on vscode or in the browser, you must add three object compiler, compilation, and options to the watch module, otherwise you will not find the callback function that triggers the hook. By observing the compiler object, you can clearly see its compiler. Hooks. XXXX. Taps and other callback functions bound above. As shown in the figure: