Expose jQuery to real Window object with Webpack

Question

I want to expose the jQuery object to the global window object that is accessible inside the developer console in the browser. Now in my webpack config I have following lines:

plugins: [
                new webpack.ProvidePlugin({
                    $: 'jquery',
                    jQuery: 'jquery'
                })
            ]

These lines add the jQuery definitions to each file in my webpack modules. But when I build the project and try to access jQuery in the developer console like this:

window.$;
window.jQuery;

it says that these properties are undefined...

Is there a way to fix this?

Answer 1

You need to use the expose-loader.

npm install expose-loader --save-dev

You can either do this when you require it:

require("expose?$!jquery");

or you can do this in your config:

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

UPDATE: As of webpack 2, you need to use expose-loader instead of expose:

module: {
    rules: [{
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: '$'
        }]
    }]
}