Expose jQuery to real Window object with Webpack

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?

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: '$'
        }]
    }]
}

The ProvidePlugin replaces a symbol in another source through the respective import, but does not expose the symbol on the global namespace. A classic example are jQuery plugins. Most of them just expect jQuery to be defined globally. With the ProvidePlugin you would make sure that jQuery is a dependency (e.g. loaded before) and the occurence of jQuery in their code would be replaced with the webpack raw equivalent of require('jquery').

If you have external scripts relying on the symbol to be in the global namespace (like let's say an externally hosted JS, Javascript calls in Selenium or simply accessing the symbol in the browser's console) you want to use the expose-loader instead.

In short: ProvidePlugin manages build-time dependencies to global symbols whereas the expose-loader manages runtime dependencies to global symbols.