how to generate custom source map with custom webpack loader?
Asked Answered
E

0

2

While writing a custom loader, I've been trying to generate a custom source map.

My 'source' is a few lines of text

this 
is 
my 
log 
lines

I wrote a loader that converts it to

exports.printAll = function(){ console.log("this ");
console.log("is ");
console.log("my ");
console.log("log ");
console.log("lines")}

everything works at runtime - i see the prints - but I am unable to generate a source map. I am using source-map which is an npm library, but documentation is scarce and I can't find any practical tutorials. So my code is like shooting in the dark.. it doesn't work at all.

var sourceMap = require('source-map');
  var SourceMapGenerator = sourceMap.SourceMapGenerator
  var map = new SourceMapGenerator({
    file: path.resolve("app/scripts/loglines.txt"),
    sourceContent: lines
  });

  map.addMapping({
    generated: {
      line: 2,
      column: 5
    },
    source: path.resolve("app/scripts/guy.txt"),
    sourceContent:lines.join('\n'), 
    original: {
      line: 1,
      column: 0
    }
  });

all I can see in chrome's dev tools is app/scripts/guy.txt with the following content

null


/** WEBPACK FOOTER **
 ** ./app/scripts/guy.txt
 **/

What I want to see here is the original text lines. And for each line I step over I want to see the console log.

The debugger actually stops on the null :) so something is happening. but that's about that.

Economics answered 23/10, 2016 at 5:50 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.