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];
  }