diff --git a/README.md b/README.md index 7f6027c1..2a1f108c 100644 --- a/README.md +++ b/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 diff --git a/config/webpack.config.js b/config/webpack.config.js index 00c04ffd..1fca26b4 100644 --- a/config/webpack.config.js +++ b/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(), diff --git a/src/webpack/ionic-webpack-factory.ts b/src/webpack/ionic-webpack-factory.ts index d7d6115f..5cf02294 100644 --- a/src/webpack/ionic-webpack-factory.ts +++ b/src/webpack/ionic-webpack-factory.ts @@ -1,4 +1,5 @@ import { IonicEnvironmentPlugin } from './ionic-environment-plugin'; +import { provideCorrectSourcePath } from './source-mapper'; import { getContext } from '../util/helpers'; @@ -6,3 +7,7 @@ export function getIonicEnvironmentPlugin() { const context = getContext(); return new IonicEnvironmentPlugin(context.fileCache); } + +export function getSourceMapperFunction(): Function { + return provideCorrectSourcePath; +} \ No newline at end of file diff --git a/src/webpack/source-mapper.ts b/src/webpack/source-mapper.ts new file mode 100644 index 00000000..023f9685 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/webpack/typescript-sourcemap-loader-memory.ts b/src/webpack/typescript-sourcemap-loader-memory.ts index 03848c61..6293fea8 100644 --- a/src/webpack/typescript-sourcemap-loader-memory.ts +++ b/src/webpack/typescript-sourcemap-loader-memory.ts @@ -1,3 +1,4 @@ +import { normalize, resolve } from 'path'; import { changeExtension, getContext} from '../util/helpers'; module.exports = function typescriptSourcemapLoaderMemory(source: string, map: any) { @@ -5,6 +6,8 @@ module.exports = function typescriptSourcemapLoaderMemory(source: string, map: a 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]; }