write content for webpack tutorial

[bcoe]

I don't know much about Webpack, but I would love to have a section on the new Istanbul website that helps walk beginners through the process of setting up their project for coverage:

there's a section just waiting for content:

http://istanbul.js.org/2016/08/02/webpack.html

@iam4x, @JaKXz do you think you could help pull something together for beginners?

[sateffen]

What exactly do you want to know/read? Istanbul together with webpack doesn't make too much sense, because without a test setup you usually don't want to take coverage. Usually I know a lot about usage of istanbul and integration in different tools, because I've done quite a lot of integrations. Not only with webpack, but other systems as well.

So if you define the topic a little more, I'll be happy to provide some help. But just like this I would say: Link to the coresponding loaders.

If you want to know anything specific, and I can help, just ask, or contact me on twitter.

[MoOx]

I am a webpack user (I am using it for last 2 years or something like that, on all of my projects) and I don't really see how we can integrate istanbul/nyc with webpack.
This section does not really seems relevant to me, but I may miss something.

[bcoe]

@MoOx @sateffen, was curious if it would be possible to provide some default, boilerplate, documentation that would help folks using Webpack + babel-plugin-istanbul + karma, to instrument their projects for test-coverage ... maybe the section would be better called, Webpack + Karma? Or maybe I'm missing the nature of issues like istanbuljs/babel-plugin-istanbul#25 in general?

[sateffen]

In the mentioned issue the problem was, that the readme is a little confusing to read. It talks about nyc, not the the plugin itself. That confused me.

If you want, you can check out my babel pong example 2, there I've configured babel-plugin-istanbul to work with karma + webpack, rollup and browserify. Every setup works, and all are usable via the npm scripts. Maybe that helps you to get the integrations.

I try to find some time the next days to write a gist with a tutorial, then we can evolve that to a real, usable tutorial.

[JaKXz]

What @MoOx mentioned has been my main reason for hesitating on this issue, but I do want to give babel-webpack-plugin a try for those who use webpack + karma (since that's the only use case for this AFAIK because you'd just be writing node unit tests otherwise and imho as much as possible until you need browser level "integration" tests).

That being said I'm curious to check out @sateffen's work when I can find a few minutes :)

[bcoe]

@JaKXz @MoOx @sateffen perhaps rather than calling it a "Webpack Tutorial", we could add a section called, Testing Frontend Code, or something along these lines? This could then focus on karma + webpack, etc.

[MoOx]

@JaKXz warning: babel-webpack-plugin is not usable in real life when you have more than 10 modules, because it's really slooooow.

@bcoe Indeed it seems better to rename that section. That said, I don't use karma and don't run tests in the browser anymore (thanks to React) :)

[sateffen]

I thought some time about this, and I think there is no real tutorial for a specific usecase necessary. If the readme for babel-plugin-istanbul gets better, it should be enough. It's basically a babel plugin, and that should get pointed out. Remove the parts about nyc, because they are confusing, and together with mocha nearly wrong in my optinion. I use the babel-plugin, and no external tool, so I need to read everything about the plugin.

That should help devs to integrate well with karma, mocha, webpack, rollup, everything they need I guess.

Just my 2 cents after thinking about it.

[bennycode]

The Using Istanbul with Webpack page says "Tutorial coming soon" and points to this issue here which is from 2016! So it's time to do something...

What about linking this tutorial from Kent C. Dodds?