From 03163bc01206e881732c32576e2ef18c007436a4 Mon Sep 17 00:00:00 2001 From: Vadim Gorbachev Date: Mon, 21 Mar 2016 17:29:28 +0300 Subject: [PATCH 1/2] add extension vscode-chrome-debugger https://github.com/AngularClass/angular2-webpack-starter/issues/144 --- .vscode/launch.json | 23 +++++++++++++++++++++++ .vscode/settings.json | 3 +++ config/webpack.dev.js | 41 +++++++++++++++++++++++++++++++++++++---- package.json | 3 ++- 4 files changed, 65 insertions(+), 5 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 .vscode/settings.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000000..b090725281 --- /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" + } + ] +} \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000000..20af2f68a6 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +// Place your settings in this file to overwrite default and user settings. +{ +} \ No newline at end of file diff --git a/config/webpack.dev.js b/config/webpack.dev.js index df2bfb3bff..93adcabc8e 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.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 @@ -47,7 +48,7 @@ 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', + 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. @@ -109,7 +110,28 @@ 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; + } + } + }, @@ -225,7 +247,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() ], @@ -252,7 +284,8 @@ module.exports = { watchOptions: { aggregateTimeout: 300, poll: 1000 - } + }, + outputPath: helpers.root('dist') }, // Include polyfills or mocks for various node stuff diff --git a/package.json b/package.json index 9dea62578d..a7570d2ff3 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,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", From a37564690f3bc1ba6254c507899d99b0ad078c80 Mon Sep 17 00:00:00 2001 From: Vadim Gorbachev Date: Mon, 21 Mar 2016 18:35:04 +0300 Subject: [PATCH 2/2] add manifest use manifest-webpack-plugin --- config/webpack.prod.js | 10 +++++++++- package.json | 3 ++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/config/webpack.prod.js b/config/webpack.prod.js index 22c77bb01d..e94374f8a7 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.js @@ -19,6 +19,8 @@ var CopyWebpackPlugin = require('copy-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var WebpackMd5Hash = require('webpack-md5-hash'); var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; +var path = require('path'); +var Manifest = require('manifest-webpack-plugin'); /** * Webpack Constants @@ -354,7 +356,13 @@ module.exports = { algorithm: helpers.gzipMaxLevel, regExp: /\.css$|\.html$|\.js$|\.map$/, threshold: 2 * 1024 - }) + }), + + // Plugin: manifest-webpack-plugin + // Description: webpack plugin for generating asset manifests + // + // See: https://www.npmjs.com/package/manifest-webpack-plugin + new Manifest(path.join('dist', 'manifest.json')) ], diff --git a/package.json b/package.json index a7570d2ff3..c4a4822e0a 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,8 @@ "webpack": "^1.12.14", "webpack-dev-server": "^1.14.1", "webpack-md5-hash": "^0.0.5", - "write-file-webpack-plugin": "^3.1.8" + "write-file-webpack-plugin": "^3.1.8", + "manifest-webpack-plugin": "^0.2.0" }, "repository": { "type": "git",