Webpack 2, RC 4 • Hacker News Board

Re: Webpack 2, RC 4

#21

Post by seniorsassycat » Fri, Jan 13, 2017, 10:45 PM UTC

johnny_reilly wrote: post #10

seniorsassycat wrote: post #8

I recently setup a typescript > webpack project and I was really disappointed with the dev-tools debugging experience. Webpack renames imported bindings, so import {foo} from './bar'; becomes something like this let __webpack_require_foo_bar = _webpack_modules[5 /* foo */].bar; So if you are paused in the debugger and want to use foo in a watch statement, or use it in a computation you'll have to reference the real s…

One of the maintainers of ts-loader here. Debugging original source is totally possible. Take a look at the setup here: https://github.com/TypeStrong/ts-loader/tree/master/examples... And in the official samples (WebPack 1): https://github.com/Microsoft/TypeScriptSamples/tree/master/r...

So I did reference those examples when I setup this project, but this doesn't have to do with typescript, or ts-loader.

Here's some gists showing a minimal reproduction without typescript. https://gist.github.com/anonymous/ad044363f73b845cccb4e7f225...

Specifically, look at lines 25 and 28 of lib-main.js

Re: Webpack 2, RC 4

#22

Post by seniorsassycat » Fri, Jan 13, 2017, 10:47 PM UTC

saosebastiao wrote: post #13

seniorsassycat wrote: post #8

I recently setup a typescript > webpack project and I was really disappointed with the dev-tools debugging experience. Webpack renames imported bindings, so import {foo} from './bar'; becomes something like this let __webpack_require_foo_bar = _webpack_modules[5 /* foo */].bar; So if you are paused in the debugger and want to use foo in a watch statement, or use it in a computation you'll have to reference the real s…

Stuff like this is the reason the Unix Philosophy of small "composable" tools doesn't work in this ecosystem. Because if you run your code through three different preprocessor steps, everything breaks and your source maps aren't even close to usable anymore, so you can't debug anymore. I've been campaigning for more of a monolithic design in the TS ecosystem. Not that the architecture of the TS compiler needs to be m…

This isn't actually caused by piping data through many small tools, it's reproducible with solely webpack 2.

https://gist.github.com/anonymous/ad044363f73b845cccb4e7f225...

Re: Webpack 2, RC 4

#23

Post by johnny_reilly » Sat, Jan 14, 2017, 11:36 AM UTC

seniorsassycat wrote: post #21

johnny_reilly wrote: post #10

Earlier quoted context omitted.

One of the maintainers of ts-loader here. Debugging original source is totally possible. Take a look at the setup here: https://github.com/TypeStrong/ts-loader/tree/master/examples... And in the official samples (WebPack 1): https://github.com/Microsoft/TypeScriptSamples/tree/master/r...

So I did reference those examples when I setup this project, but this doesn't have to do with typescript, or ts-loader. Here's some gists showing a minimal reproduction without typescript. https://gist.github.com/anonymous/ad044363f73b845cccb4e7f225... Specifically, look at lines 25 and 28 of lib-main.js

Your WebPack.config.js appears to be missing this:

devtool: 'inline-source-map'

No sourcemaps, no debugging original source. Hope that helps

Re: Webpack 2, RC 4

#24

Post by seniorsassycat » Sat, Jan 14, 2017, 4:15 PM UTC

johnny_reilly wrote: post #23

seniorsassycat wrote: post #21

Earlier quoted context omitted.

So I did reference those examples when I setup this project, but this doesn't have to do with typescript, or ts-loader. Here's some gists showing a minimal reproduction without typescript. https://gist.github.com/anonymous/ad044363f73b845cccb4e7f225... Specifically, look at lines 25 and 28 of lib-main.js

Your WebPack.config.js appears to be missing this: devtool: 'inline-source-map' No sourcemaps, no debugging original source. Hope that helps

lib-main-dev.js is an example of the output when running 'webpack -d', which is short for '--devtool sourcemap --debug --output-pathinfo', it has the same problem*

There are really two problems contributing to this. First, webpack rewrites import/export statments and never introduces a variable binding with the same name as the bindings used in the original import/export.

Second sourcemaps _do_ map lines of compiled code to lines of original source, but they _do not_ map renamed variables to original names. As an example, enable minifiaction and soucemaps then try to debug a function. You might notice that the variables are all called a, b, c, and other short uglified strings now.

* I just realized that the file I uploaded is missing the ends of each line, so that file is incorrect.