Expose jQuery to real Window object with Webpack
JavascriptJqueryWebpackJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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: '$'
}]
}]
}
Solution 2 - Javascript
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.
Solution 3 - Javascript
Looks like the window
object is exposed in all modules.
Why not just import/require JQuery
and put:
window.$ = window.JQuery = JQuery;
You will need to ensure that this happens before requiring/importing any module that makes use of window.JQuery
, either in a requiring module or in the module where it's being used.
Solution 4 - Javascript
This always worked for me. including for webpack 3 window.$ = window.jQuery = require("jquery");
Solution 5 - Javascript
None of the above worked for me. (and I really don't like the expose-loader syntax). Instead,
I added to webpack.config.js:
var webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
})
]
}
Than all modules have access through jQuery through $.
You can expose it to the window by adding the following to any of your modules bundled by webpack:
window.$ = window.jQuery = $
Solution 6 - Javascript
Update for Webpack v2
Install expose-loader as described by Matt Derrick:
npm install expose-loader --save-dev
Then insert the following snippet in your webpack.config.js
:
module.exports = {
entry: {
// ...
},
output: {
// ...
},
module: {
loaders: [
{ test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
]
}
};
(from the expose-loader docs)
Solution 7 - Javascript
In my case works
{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }