├── .editorconfig ├── .gitignore ├── .vscode ├── launch.json ├── settings.json └── tasks.json ├── README.md ├── package.json ├── src ├── index.ts └── module.ts ├── tsconfig.json └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | yarn.lock 4 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Launch Program", 6 | "type": "node", 7 | "request": "launch", 8 | "cwd": "${workspaceRoot}", 9 | "program": "${workspaceRoot}/src/index.ts", 10 | "outFiles": [ 11 | "${workspaceRoot}/dist/bundle.js" 12 | ], 13 | "sourceMaps": true 14 | } 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "./node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "command": "webpack", 4 | "isShellCommand": true, 5 | "args": [], 6 | "showOutput": "always" 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | VSCode TypeScript Webpack Node Debug Example 2 | ============================================ 3 | 4 | A minimal setup for VSCode debug of NodeJS programs written in TypeScript and bundled using Webpack > 2. 5 | 6 | This example also works for debugging the Electron **Main Process**. 7 | 8 | 9 | TypeScript configuration 10 | ------------------------ 11 | 12 | Enable sourceMap in `tsconfig.json`: 13 | 14 | ```json 15 | { 16 | "compilerOptions": { 17 | "sourceMap": true 18 | } 19 | } 20 | ``` 21 | 22 | 23 | Webpack configuration 24 | --------------------- 25 | 26 | ### Sourcemaps 27 | 28 | Enable sourcemaps in your Webpack configuration: 29 | 30 | ```js 31 | { 32 | devtool: 'cheap-source-map' 33 | } 34 | ``` 35 | 36 | My personal pick is `cheap-source-map`, but you can check all available source-maps [here](https://webpack.js.org/configuration/devtool/). 37 | 38 | > All eval-based source maps won't work. 39 | 40 | 41 | ### Sourcemaps Modules Absolute Paths 42 | 43 | This will output the absolute path of your source files in the sourcemaps: 44 | 45 | ```js 46 | { 47 | output: { 48 | devtoolModuleFilenameTemplate: '[absolute-resource-path]' 49 | } 50 | } 51 | ``` 52 | 53 | 54 | VSCode configuration 55 | -------------------- 56 | 57 | You need to create a `launch.json` in the `.vscode` folder at the root of your project. 58 | 59 | ```json 60 | { 61 | "configurations": [ 62 | { 63 | "name": "Launch Program", 64 | "type": "node", 65 | "request": "launch", 66 | "cwd": "${workspaceRoot}", 67 | "program": "${workspaceRoot}/src/index.ts", 68 | "outFiles": [ 69 | "${workspaceRoot}/dist/bundle.js" 70 | ], 71 | "sourceMaps": true 72 | } 73 | ] 74 | } 75 | ``` 76 | 77 | Specify in `"program"` the **source file** corresponding to the entry-point of your program. 78 | 79 | In `"outFiles"` specify the path to the bundle generated by Webpack. 80 | 81 | Set `"sourceMaps"` to `true`. 82 | 83 | 84 | Example 85 | ------- 86 | 87 | Clone this repo to test the debug and check the configuration: 88 | 89 | ``` 90 | git clone https://github.com/kube/vscode-ts-webpack-node-debug-example 91 | cd vscode-ts-webpack-node-debug-example 92 | npm install 93 | ``` 94 | 95 | Now: 96 | 97 | - Open the folder in VSCode 98 | - Place some breakpoints in the source code in `src/` 99 | - Build the project using ⌘ + ⇧ + B 100 | - Start debugging using F5 101 | 102 | Enjoy. 103 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "ts-loader": "^2.0.0", 4 | "typescript": "^2.1.5", 5 | "webpack": "2.2" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import MeaningOfLife, { sayHello } from './module' 2 | 3 | console.log(MeaningOfLife) 4 | 5 | sayHello('Bobby') 6 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | export function sayHello(name: string) { 2 | const text = `Hello ${name}` 3 | console.log(text) 4 | } 5 | 6 | export default 42 7 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "es2015", 4 | "target": "es5", 5 | "rootDir": "src", 6 | "sourceMap": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const { join } = require('path') 2 | 3 | module.exports = { 4 | 5 | // Pick any source-map that does not require eval. 6 | // `cheap-source-map` gives the best speed/quality for development. 7 | devtool: 'cheap-source-map', 8 | 9 | entry: join(__dirname, 'src/index'), 10 | 11 | output: { 12 | path: join(__dirname, 'dist'), 13 | filename: 'bundle.js', 14 | 15 | // Bundle absolute resource paths in the source-map, 16 | // so VSCode can match the source file. 17 | devtoolModuleFilenameTemplate: '[absolute-resource-path]' 18 | }, 19 | 20 | resolve: { 21 | extensions: ['.ts'] 22 | }, 23 | 24 | module: { 25 | loaders: [ 26 | { 27 | test: /\.ts$/, 28 | loaders: ['ts-loader'] 29 | } 30 | ] 31 | } 32 | } 33 | --------------------------------------------------------------------------------