Question

134

Expose jQuery to real Window object with Webpack

rated 0 times [ 136] [ 2] / answers: 1 / hits: 88424 / 9 Years ago, mon, march 16, 2015, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dylondarrianb

Add To Favorites

Follow

Total Points: 48

Total Questions: 109

Total Answers: 104

Location: Zambia

Member since Thu, Jun 25, 2020

4 Years ago

answered 9 Years ago jazminkyrap · Accepted Answer

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

        }]

    }]

}