fix(webpack): source maps link to original src for ide debugging

source maps link to original src for ide debugging

Author: danbucholtz

README.md

@@ -108,7 +108,7 @@ npm run build --rollup ./config/rollup.config.js
 | Config Values   | package.json Config | Cmd-line Flag | Defaults        | Details        |
 |-----------------|---------------------|---------------|-----------------|----------------|
 | bundler         | `ionic_bundler`     | `--bundler`   | `webpack`       | Chooses which bundler to use: `webpack` or `rollup` |
-| source map type | `ionic_source_map`  | `--sourceMap` | `eval`          | Chooses the webpack `devtool` option. We recommend `eval` or `source-map` |
+| source map type | `ionic_source_map`  | `--sourceMap` | `eval`          | Chooses the webpack `devtool` option. We only support `eval` or `source-map` for now |
 | root directory  | `ionic_root_dir`    | `--rootDir`   | `process.cwd()` | The directory path of the Ionic app |
 | tmp directory   | `ionic_tmp_dir`     | `--tmpDir`    | `.tmp`          | A temporary directory for codegen'd files using the Angular `ngc` AoT compiler |
 | src directory   | `ionic_src_dir`     | `--srcDir`    | `src`           | The directory holding the Ionic src code |
@@ -163,7 +163,7 @@ Example NPM Script:
 ```
 
 ## Tips
-1. The Webpack `devtool` setting is driven by the `ionic_source_map` variable. It defaults to `eval` for fast builds, but can provide the original source map by changing the value to `source-map`.
+1. The Webpack `devtool` setting is driven by the `ionic_source_map` variable. It defaults to `eval` for fast builds, but can provide the original source map by changing the value to `source-map`. There are additional values that Webpack supports, but we only support `eval` and `source-maps` for now.
 
 
 ## The Stack

config/webpack.config.js

@@ -56,7 +56,8 @@ module.exports = {
   entry: getEntryPoint(),
   output: {
     path: '{{BUILD}}',
-    filename: 'main.js'
+    filename: 'main.js',
+    devtoolModuleFilenameTemplate: ionicWebpackFactory.getSourceMapperFunction(),
   },
   devtool: getDevtool(),
 

src/webpack/ionic-webpack-factory.ts

@@ -1,8 +1,13 @@
 import { IonicEnvironmentPlugin } from './ionic-environment-plugin';
+import { provideCorrectSourcePath } from './source-mapper';
 import { getContext } from '../util/helpers';
 
 
 export function getIonicEnvironmentPlugin() {
   const context = getContext();
   return new IonicEnvironmentPlugin(context.fileCache);
 }
+
+export function getSourceMapperFunction(): Function {
+  return provideCorrectSourcePath;
+}

src/webpack/source-mapper.ts

@@ -0,0 +1,19 @@
+import { BuildContext } from '../util/interfaces';
+import { getContext} from '../util/helpers';
+import { normalize, resolve, sep } from 'path';
+
+export function provideCorrectSourcePath(webpackObj: any) {
+  const context = getContext();
+  return provideCorrectSourcePathInternal(webpackObj, context);
+}
+
+function provideCorrectSourcePathInternal(webpackObj: any, context: BuildContext) {
+  const webpackResourcePath = webpackObj.resourcePath;
+  const noTilde = webpackResourcePath.replace(/~/g, 'node_modules');
+  const absolutePath = resolve(normalize(noTilde));
+  if (process.env.IONIC_SOURCE_MAP === 'eval') {
+    // add another path.sep to the front to account for weird webpack behavior
+    return sep + absolutePath;
+  }
+  return absolutePath;
+}

src/webpack/typescript-sourcemap-loader-memory.ts

@@ -1,10 +1,13 @@
+import { normalize, resolve } from 'path';
 import { changeExtension, getContext} from '../util/helpers';
 
 module.exports = function typescriptSourcemapLoaderMemory(source: string, map: any) {
   this.cacheable();
   var callback = this.async();
   const context = getContext();
 
+  const absolutePath = resolve(normalize(this.resourcePath));
+
   const javascriptPath = changeExtension(this.resourcePath, '.js');
   const javascriptFile = context.fileCache.get(javascriptPath);
   const sourceMapPath = javascriptPath + '.map';
@@ -13,6 +16,7 @@ module.exports = function typescriptSourcemapLoaderMemory(source: string, map: a
   let sourceMapObject = map;
   if (sourceMapFile) {
     sourceMapObject = JSON.parse(sourceMapFile.content);
+    sourceMapObject.sources = [absolutePath];
     if (!sourceMapObject.sourcesContent || sourceMapObject.sourcesContent.length === 0) {
       sourceMapObject.sourcesContent = [source];
     }