介绍:
在使用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的调试是一样的。