VSCode使用webpack-dev-server下调试设置

介绍：

在使用VSCode开发JS时会使用webpack-dev-server进行代码实时编译，但是会发现无法在VSCode里打断点进行测试，这里做一个简单的介绍
参考文章网站：https://zhuanlan.zhihu.com/p/106793313

项目目录结构

首先看文件package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --port 3000 --hot --progress --compress --host 127.0.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

在开发时使用dev 开发运行

我们还要配置webpack 的配置文件

配置webpack.config.js

module.exports = {
    mode: 'development',//development 编译的文件不压缩    production 编译的文件压缩
    devtool: 'eval-source-map', //用于将编译的文件和实际文件相互映射
}

这个时候如果使用命令npm run dev 是可以在本地运行的，但是会发现，在index.js里打上断点没有效果，这个时候需要配置VSCode的运行启动配置

配置tasks.json

首先要配置一个task，用于启动package.json 里的 dev。

{
	"version": "2.0.0",
	"tasks": [
		{
            "label": "dev",  // Task 名称，在命令面板中显示
            "isBackground": true,
            "type": "npm",
            "script": "dev",  // npm 要执行的 script 名称，对应 package.json 中的定义
            "path": "/",  // 执行命令所在的目录，相当于 cd 命令
            "detail": "编译至开发环境",  // Task 的描述，在命令面板中显示
            "group": "test",
            "problemMatcher": {
                "owner": "typescript",
                "fileLocation": "relative",
                "pattern": {
                    "regexp": "^([^\\s].*)\\((\\d+|\\,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
                    "file": 1,
                    "location": 2,
                    "severity": 3,
                    "code": 4,
                    "message": 5
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": ".",
                    "endsPattern": "Version: webpack.+"
                }
            }
        }
	]
}

然后配置一下启动配置

配置launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://127.0.0.1:3000/src", // 浏览器启动访问的路径
            "webRoot": "${workspaceFolder}",  // 相对于工作区目录下目录寻找源文件
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
            },
            "preLaunchTask": "dev" // task的label名称
        },
    ]
}

这里使用的是chrome 类型的启动项，启动后会自动打开chrome 浏览器，所以在package.json 的启动命令里没有使用参数 --open 。

这个时候使用F5运行调试就能打断点调试了

这时会发现浏览器的调试和VSCode的调试是一样的。