May | 2015 | code for now

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:

var Webpack = require('webpack'),
    path = require('path');

module.exports = function(config) {
    config.set({
        frameworks: [
            'mocha',
            'chai',
            'sinon'
        ],

        files: [
            'tests/*_test.js',
            'tests/**/*_test.js'
        ],

        autoWatch: true,

        browsers: [
            'PhantomJS'
        ],

        preprocessors: {
            'tests/*_test.js': ['webpack']
        },

        reporters: [
            'progress',
            'coverage'
        ],

        coverageReporter: {
            dir: 'build/reports/coverage',
            reporters: [
                {
                    type: 'html',
                    subdir: 'report-html'
                },
                {
                    type: 'lcov',
                    subdir: 'report-lcov'
                },
                {
                    type: 'cobertura',
                    subdir: '.',
                    file: 'cobertura.txt'
                }
            ]
        },

        webpack: {
            module: {
                postLoaders: [
                    {
                        test: /\.js$/,
                        exclude: /(node_modules|resources\/js\/vendor)/,
                        loader: 'istanbul-instrumenter'
                    }
                ]
            }
        },

        webpackMiddleware: {
            noInfo: true
        },

        plugins: [
            'karma-webpack',
            'karma-mocha',
            'karma-chai',
            'karma-sinon',
            'karma-phantomjs-launcher',
            'karma-coverage'
        ]

    });
};

var Webpack = require('webpack'),

path = require('path');

module.exports = function(config) {

config.set({

frameworks: [

'mocha',

'chai',

'sinon'

files: [

'tests/*_test.js',

'tests/**/*_test.js'

autoWatch: true,

browsers: [

'PhantomJS'

preprocessors: {

'tests/*_test.js': ['webpack']

reporters: [

'progress',

'coverage'

coverageReporter: {

dir: 'build/reports/coverage',

reporters: [

{

type: 'html',

subdir: 'report-html'

{

type: 'lcov',

subdir: 'report-lcov'

{

type: 'cobertura',

subdir: '.',

file: 'cobertura.txt'

}

]

webpack: {

module: {

postLoaders: [

{

test: /\.js$/,

exclude: /(node_modules|resources\/js\/vendor)/,

loader: 'istanbul-instrumenter'

}

]

}

webpackMiddleware: {

noInfo: true

plugins: [

'karma-webpack',

'karma-mocha',

'karma-chai',

'karma-sinon',

'karma-phantomjs-launcher',

'karma-coverage'

]

});

};

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:

var path = require('path');

module.exports = {
    entry: {
        app: './resources/js/app.js'
    },

    resolve: {
        alias: {
            jquery: path.resolve(__dirname, 'resources', 'js', 'jquery-1.11.3.min.js')
        }
    }
};

var path = require('path');

module.exports = {

entry: {

app: './resources/js/app.js'

resolve: {

alias: {

jquery: path.resolve(__dirname, 'resources', 'js', 'jquery-1.11.3.min.js')

}

};

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:

require('expose?$!expose?jQuery!jquery');

1	require('expose?$!expose?jQuery!jquery');

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:

npm install expose-loader --save

1	npm install expose-loader --save

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:

var path = require('path');

module.exports = {

    // create multiple entry points
    entry: {
        main: './main.js',
        page2: './page2.js'
    },

    output: {
        // specify a directory to save webpack built files
        path: path.join(__dirname, 'public/build'),

        // publicPath needs to be specified for webpack to know where to find the chunks
        publicPath: 'public/build/',
        filename: '[name].js',
        chunkFilename: '[chunkhash].js'
    }
};

var path = require('path');

module.exports = {

// create multiple entry points

entry: {

main: './main.js',

page2: './page2.js'

output: {

// specify a directory to save webpack built files

path: path.join(__dirname, 'public/build'),

// publicPath needs to be specified for webpack to know where to find the chunks

publicPath: 'public/build/',

filename: '[name].js',

chunkFilename: '[chunkhash].js'

}

};

S	M	T	W	T	F	S
« Mar				Nov »
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

code for now

Monthly Archives: May 2015

webpack – karma and istanbul code coverage

webpack – exposing jQuery as a global variable

webpack – chunk files not found

Recent Posts

Recent Comments

Archives

Calendar

Categories