From d396e32ef7479075f0710861249b43979b01b0fb Mon Sep 17 00:00:00 2001 From: Pei-Tang Huang Date: Fri, 18 Mar 2016 16:23:35 +0800 Subject: [PATCH 1/5] Added .vscode/launch.json for launching Visual Studio Code Debugger. --- .vscode/launch.json | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000000..f6a484b75b --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,23 @@ +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Launch Chrome", + "type": "chrome", + "request": "launch", + "url": "http://localhost:3000/", + "sourceMaps": true, + "diagnosticLogging": true, + "webRoot": "${workspaceRoot}/dist" + }, + { + "name": "Attach Chrome", + "type": "chrome", + "request": "attach", + "port": 9222, + "sourceMaps": true, + "diagnosticLogging": true, + "webRoot": "${workspaceRoot}/dist" + } + ] +} From e3845ecd3004587548e58633702cb3637c003a26 Mon Sep 17 00:00:00 2001 From: Pei-Tang Huang Date: Fri, 18 Mar 2016 16:29:45 +0800 Subject: [PATCH 2/5] Map resource path for Visual Studio Code Debugger. --- webpack.config.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 5e23f57bf8..16dfdf367f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -106,8 +106,27 @@ module.exports = { // inside the output.path directory. // // See: http://webpack.github.io/docs/configuration.html#output-chunkfilename - chunkFilename: '[id].chunk.js' + chunkFilename: '[id].chunk.js', + // Filename template string of function for the sources + // array in a generated SourceMap. + // + // See: http://webpack.github.io/docs/configuration.html#output-devtoolmodulefilenametemplate + devtoolModuleFilenameTemplate: function (info) { + var resourcePath = info.absoluteResourcePath; + if (resourcePath.indexOf(__dirname) !== 0) { + // Normalize resouce path if it is not an absolute path + // (e.g. 'node_modules/rxjs/Observable.js') + resourcePath = helpers.root(resourcePath); + } + if (resourcePath.charAt(0) === '/') { + // Mac OS X absolute path has a leading slash already + // https://github.com/Microsoft/vscode-chrome-debug/issues/63#issuecomment-163524778 + return 'file://' + resourcePath; + } else { + return 'file:///' + resourcePath; + } + } }, // Options affecting the normal modules. From 30db7f50bdb40f2c0e4c7d1eb610a5c695bc7783 Mon Sep 17 00:00:00 2001 From: Pei-Tang Huang Date: Fri, 18 Mar 2016 16:30:37 +0800 Subject: [PATCH 3/5] Write bundles to disk for Visual Studio Debugger. --- package.json | 3 ++- webpack.config.js | 15 +++++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 802d1a7234..57475d7f87 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,8 @@ "url-loader": "^0.5.7", "webpack": "^1.12.14", "webpack-dev-server": "^1.14.1", - "webpack-md5-hash": "^0.0.5" + "webpack-md5-hash": "^0.0.5", + "write-file-webpack-plugin": "^3.1.8" }, "repository": { "type": "git", diff --git a/webpack.config.js b/webpack.config.js index 16dfdf367f..8ad33da1fb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -11,6 +11,7 @@ var helpers = require('./helpers'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; +var WriteFilePlugin = require('write-file-webpack-plugin'); /** * Webpack Constants @@ -237,8 +238,17 @@ module.exports = { // // See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin // NOTE: when adding more properties make sure you include them in custom-typings.d.ts - new webpack.DefinePlugin({'ENV': JSON.stringify(METADATA.ENV), 'HMR': HMR}) + new webpack.DefinePlugin({'ENV': JSON.stringify(METADATA.ENV), 'HMR': HMR}), + // Plugin: Write File Plugin + // Description: Write bundle files for debugging. + // Forces webpack-dev-server program to write bundle files to the file system. + // + // For use in conjuction with Visual Code debugger. + // + // See: https://github.com/AngularClass/angular2-webpack-starter/issues/297#issuecomment-193989148 + // See: https://github.com/gajus/write-file-webpack-plugin + new WriteFilePlugin() ], // Static analysis linter for TypeScript advanced options configuration @@ -264,7 +274,8 @@ module.exports = { watchOptions: { aggregateTimeout: 300, poll: 1000 - } + }, + outputPath: helpers.root('dist') }, // Include polyfills or mocks for various node stuff From 66c4182d917395620319ce23e0a98d8b6034c99a Mon Sep 17 00:00:00 2001 From: Pei-Tang Huang Date: Fri, 18 Mar 2016 16:31:12 +0800 Subject: [PATCH 4/5] Change devtool from `eval` to `inline` for Visual Studio Code Debugger. --- webpack.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index 8ad33da1fb..3e34b030fc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -48,7 +48,8 @@ module.exports = { // // See: http://webpack.github.io/docs/configuration.html#devtool // See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps - devtool: 'cheap-module-eval-source-map', + // Note: Changed from 'eval' to 'inline' for Visual Studio Code Debugger + devtool: 'cheap-module-inline-source-map', // Cache generated modules and chunks to improve performance for multiple incremental builds. // This is enabled by default in watch mode. From 1c67dcdaba938e565bc6eaae5dca1dc97fbe9ea9 Mon Sep 17 00:00:00 2001 From: Pei-Tang Huang Date: Tue, 22 Mar 2016 14:08:40 +0800 Subject: [PATCH 5/5] Use workspace specified chrome data dir. Refer to: https://github.com/AngularClass/angular2-webpack-starter/issues/144#issuecomment-199233121 --- .gitignore | 3 +++ .vscode/launch.json | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 0d501b76e3..008780a9e3 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,6 @@ npm-debug.log # IDE # .idea/ *.swp + +# VS Code +.vscode/chrome/ diff --git a/.vscode/launch.json b/.vscode/launch.json index f6a484b75b..7b8926096a 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -8,7 +8,8 @@ "url": "http://localhost:3000/", "sourceMaps": true, "diagnosticLogging": true, - "webRoot": "${workspaceRoot}/dist" + "webRoot": "${workspaceRoot}/dist", + "userDataDir": "${workspaceRoot}/.vscode/chrome" }, { "name": "Attach Chrome",