ferbolg ferbolg - 5 months ago 517
jQuery Question

Expose jQuery to real Window object with Webpack

I wan't to expose jQuery object to the global window object that is accesible inside developer console in 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 developer console like this:

window.$;
window.jQuery;


it says that these properties are undefined...

Is there a way to fix this?

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: /jquery\.js$/, loader: 'expose?$' },
    { test: /jquery\.js$/, loader: 'expose?jQuery' }
]
Comments