在vscode中调试webpack

前言

接手了公司的新项目，但是由于对整个运作流程不了解，想要一步步进行调试加深对项目印象，所以搜索了相关资料，结合自己实际情况进行调试。

---

调试的两个关键文件

package.json

正常的package.json

{
  "name": "my-web",
  "version": "0.0.1",
  "scripts": {
    "dev": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
  },
  "dependencies": {
   	"...":"..."
  },
  "devDependencies": {
    "...":"..."
  }
}

我们一般通过控制台输入npm run dev、npm run build、npm run test分别进行开发、打包、测试。

简单介绍一下命令行

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。

npm run build

等同于执行

node build.js

例子中的node scripts/build.js的scripts/指的是脚本路径。
如果你想要了解更多，可以看看npm scripts 使用指南。

---

修改后的package.json

如果我们需要调试，则需要修改相关命令scripts中的相关命令。
现在我想要调试start.js，那么应该修改为：

    "scripts": {
  	"dev": "node --inspect-brk=5000 ./scripts/start.js scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
  },

调试的模块：
node: 运行的载体，指nodejs的可执行程序，脚本实际运行的容器。
-inspect-brk=5000：调试映射的端口。5000是端口号，可以修改，但要与VSCode lanch.json的port保持一致。
./scripts/start.js : 解析命令行文件所在的相对路径
scripts/start.js : 实际要执行的配置文件的路径
由于start.js文件包含了两个部分，第一是命令行解析，第二是执行配置，所以这里设置的地址相同。

如果你仍然对./scripts/start.js 和scripts/start.js有疑惑，可以继续往下看这个例子

如果是webpack

假设你的配置：

"scripts": {    
    "build": "webpack --config webpack.config.js"  
}

那么你就要修改成：

"scripts": {
    "build": "node --inspect-brk=5000 ./node_modules/webpack/bin/webpack --config webpack.config.js"
  }

./node_modules/webpack/bin/webpack ：官文文件的相对位置，里面包含了如何解析命令行的方法。
--config ：命令行的参数
webpack.config.js ：实际被执行的文件，即配置文件

如果是gulp

可以参考这篇文章vscode调试gulp设置。
调试gulp相对简单点，不需要自己指定调试端口。

---

VSCode lanch.json脚本配置

{
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
            "request": "launch",
            "name": "webpack debugger",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run",
                "dev"
            ],
            "port": 5000
      }
    ]
  }

重要参数：
runtimeExecutable: 程序执行器，默认是node，我们用npm脚本启动，就需要设置成npm

runtimeArgs:传递给程序执行器的参数。比如我们是npm run dev，参数就是run和 dev

port: node调试端口号，和刚才package.json script中配的--inspect-brk保持一致

---

启动调试

按F5或者点击 NPM脚本 dev 进行调试

---

参考文章：
npm scripts 使用指南
vscode调试gulp设置
Run a npm script from gulp task
VSCode 调试 webpack