VSCode 使用者的福音。在公司原来使用WebStrom开发React，Webstrom 开发React调试详见（debugging-webpack-applications-in-webstorm），后来发现VSCode是开源免费的，于是转战VSCode。虽然大中国破解很牛逼，但是在国企上班不能用破解，你懂的。废话不多说，详见一下内容。
内容大纲
- VSCode 调试配置
- webpack.config.js 配置
- 完整操作步骤
- 常见问题
VSCode 调试配置
VSCode调试快捷键F5，如果默认没有配置过，F5会有提示，我们选择Chrome
2017-01-11_220056.png
选择之后会在项目目录自动生成.vscode/launch.json，以下是我的launch.json文件，特别注意图中提示
2017-01-11_220307.png
webpack.config.js 配置
webpack.config的配置最主要注意两个东西，详见下图
2017-01-11_220745.png
完整操作步骤
- 第一步启动Webpack调试项目：
webpack-dev-server --config webpack.config.dev.js - 第二步在VSCode中按F5开启调试
常见问题
-
127.0.0.1:9222 连接失败，如下图：
zL4P2.png
处理办法：关闭所有的Chrome浏览器，重新在VSCode中F5调试即可，因为已经打开的Chrome有可能会阻止调试或者占用调试端口（默认9222）
