1. 配置webpack+babel
这部分与前端工程的配置方式相同，只多了SourceMap和npm script的配置。
1.1 工程初始化
$ mkdir test && cd test
$ npm init
1.2 安装依赖
$ npm i --save-dev webpack babel-core babel-loader babel-preset-es2015
1.3 配置webpack
新建文件：./webpack.config.js，
const path = require('path');
module.exports = {
devtool: 'source-map',
entry: {
index: path.resolve('./src/index.js'),
},
output: {
devtoolModuleFilenameTemplate: '[absolute-resource-path]',
path: path.resolve('./dist/'),
filename: '[name].js'
},
module: {
loaders: [{
test: /.js$/,
loader: 'babel-loader'
}]
}
};
注：
（1）devtool: 'source-map'，表示以独立文件的方式建立SourceMap。
（2）devtoolModuleFilenameTemplate: '[absolute-resource-path]'，是一个模板，
用来配置SourceMap文件sources数组中出现的模块路径。
1.4 配置babel
新建文件：./.babelrc，
{
"presets": [
"es2015"
],
"plugins": []
}
1.5 配置npm script，用于编译和打包
打开文件：./package.json，
{
...
"scripts": {
...
"build": "webpack --progress"
},
...
}
调用方式：
$ npm run build
2. 配置VSCode
2.1 打开工程目录
用VSCode打开工程目录./test，VSCode必须以此文件夹为根目录。
2.2 添加调试配置文件
点击工具栏：调试 -> 添加配置...
选择环境：Node.js
会自动在根目录中创建一个./.vscode文件夹，还有一个文件./.vscode/launch.json，修改它，
{
"version": "0.2.0",
// 多个独立的配置项
"configurations": [
{
// 语言
"type": "node",
// 是调试模式，还是附着到已运行的程序上
"request": "launch",
// 该配置项的名字
"name": "Launch Program",
// 程序的绝对路径
"program": "${workspaceFolder}/src/index.js",
// 调试之前要做的任务名
"preLaunchTask": "build",
// 如果存在SourceMap就使用
"sourceMaps": true,
// 是否启动后自动停止程序
"stopOnEntry": false,
// 生成的代码中，如果无法映射回源代码，就自动单步执行
"smartStep": true,
// 指出编译后的文件地址
"outFiles": [
"${workspaceRoot}/dist/**"
]
}
]
}
2.3 新建任务
点击工具栏：任务 -> 配置任务...
选择要配置的任务：npm: build
会自动新建文件./.vscode/tasks.json，我们这样配置它，
{
"version": "2.0.0",
"tasks": [
{
"label": "build", // 该任务的名字，只需要增加这一条即可
"type": "npm",
"script": "build",
"problemMatcher": []
}
]
}
其中，./.vscode/tasks.json中的tasks[*].label属性，
对应于./.vscode/launch.json中的configurations[*].preLaunchTask。
3. 示例代码
3.1 新建目录和文件
（1）./src/index.js
import hello from './hello';
hello(); // 在这打一个断点（光标定位到这一行，按F9）
（2）./src/hello.js
export default () => console.log('Hello');
3.2 启动调试
点击工具栏：调试 -> 启动调试
或者按F5，我们发现开始调试后，程序停在了断点处。
参考
VSCode: Debugging
VSCode: Integrate with External Tools via Tasks
Webpack: devtool
Webpack: output.devtoolModuleFilenameTemplate
VSCode issue: outFiles
