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的調試是一樣的。