webpack – karma and istanbul code coverage

part of the difficulty of using something like webpack is that the source code that you edit is not the final code that is used in your project. so when it comes to unit testing your code, you have to figure out how to instrument what webpack is bundling.

suppose that you are using karma as your test runner with mocha, chai, and sinon. you can add istanbul to the mix to add code coverage, but you need istanbul to understand how webpack bundles files.

luckily, there’s istanbul-instrumenter-loader. you can add this as a loader which will add the instrumentation of the code in your project as part of the webpack process.

a sample karma.conf.js file:

webpack – exposing jQuery as a global variable

webpack is an incredibly powerful tool, but finding examples of simple things are far and few between. i spent the better part of the day trying to figure out how to include jQuery as part of the global scope. first the sample webpack.config.js file:

in the webpack.config.js file, you need to add a section in resolve and set up an alias (jquery) to the jQuery file. once that’s done, you need to add a line in your entry file to expose jQuery as a global via the expose loader.

in app.js:

in this example, we are running the expose loader plugin twice to bind $ and jQuery to global scope.

also in your project, make sure to include the expose loader via the npm command:

and that’s it! jQuery is now bound to global scope as if you did a call.

webpack – chunk files not found

i’ve started my foray into webpack which appears to be quite promising, but the documentation is overwhelming and not very gentle for the newcomer.

i was trying to figure out how to asynchronously load files with webpack using CommonJS modules. apparently, if you specify an output.path in webpack, you will also need to specify the output.publicPath option so that webpack knows how to find the chunks.

an example working webpack.config.js file: