webpack – exposing jQuery as a global variable

webpack is an incredibly powerful tool, but finding examples of simple things are far and few between. i spent the better part of the day trying to figure out how to include jQuery as part of the global scope. first the sample webpack.config.js file:

in the webpack.config.js file, you need to add a section in resolve and set up an alias (jquery) to the jQuery file. once that’s done, you need to add a line in your entry file to expose jQuery as a global via the expose loader.

in app.js:

in this example, we are running the expose loader plugin twice to bind $ and jQuery to global scope.

also in your project, make sure to include the expose loader via the npm command:

and that’s it! jQuery is now bound to global scope as if you did a call.

4 thoughts on “webpack – exposing jQuery as a global variable

  1. I’m not sure when it was implemented, but I just read up how to do this in Browserify using ‘global.jQuery = require(“jquery”);’ and this seems to work the same in webpack as well.

Leave a Reply

Your email address will not be published. Required fields are marked *