我们知道在浏览器的source面板中可以进行断点调试，但是webpack编译过程是在Nodejs环境中进行的，怎么才能打断点查看编译过程呢？

    vscode提供了断点调试功能，包括Chrome和Nodejs，下面介绍一下怎么去配置
    1、首先用vscode打开你要调试的项目
    2、键盘F5键或者点击菜单（Run->Start Debugging），会出现下图
    image.png
    然后点击创建一个launch.js文件，内容如下：

    1. {
    2.     // Use IntelliSense to learn about possible attributes.
    3.     // Hover to view descriptions of existing attributes.
    4.     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    5.     "version": "0.2.0",
    6.     "configurations": [
    7.         {
    8.             "type": "node", // node环境
    9.             "request": "launch",
    10.             "name": "Launch Program",
    11.             "skipFiles": [
    12.                 "<node_internals>/**"
    13.             ],
    14.             "program": "${workspaceFolder}\\index.js" // 开始执行的文件
    15.         }
    16.     ]
    17. }

    然后检查type对应的环境和program对应的开始执行文件，在你的index.js文件相应的位置打上debugger，再次按F5，就会从index.js开始执行到debugger的地方

    下面用webpack编译举个例子
    1、创建一个文件夹 webpack-debug , 运行 npm init -y ,然后 npm i webpack -D
    2、在根目录下创建一个app.js文件，简单添加点内容

    1. // app.js
    2. const app = 'app'
    4. export default app

    3、配置webpack.config.js

    1. module.exports = {
    2.     mode: 'none',
    3.     entry: './app.js',
    4.     output: {
    5.         filename: '[name].js',
    6.         path: __dirname + '/lib',
    7.     }
    8. }

    4、添加启动脚本文件start.js

    1. const webpack = require('webpack')
    2. const config = require('./webpack.config')
    4. debugger
    6. const compiler = webpack(config)
    8. debugger
    10. compiler.run(err => {
    11.     console.log(err)
    12. })

    5、根据前面介绍的添加launch.json文件

    1. {
    2.     // Use IntelliSense to learn about possible attributes.
    3.     // Hover to view descriptions of existing attributes.
    4.     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    5.     "version": "0.2.0",
    6.     "configurations": [
    7.         {
    8.             "type": "node",
    9.             "request": "launch",
    10.             "name": "Launch Program",
    11.             "skipFiles": [
    12.                 "<node_internals>/**"
    13.             ],
    14.             "program": "${workspaceFolder}\\start.js" // 从start.js开始启动
    15.         }
    16.     ]
    17. }

    6、F5进行调试
    image.png

    可以使用step into image.png查看每一步调用

    本节代码：链接

    webpack基本原理可查看这篇：webpack基本原理