{
  "path": "/posts/the-mysterious-case-of-webpack-angular-and-jquery",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "angularjs",
    "webpack",
    "jquery"
  ],
  "$type": "site.standard.document",
  "title": "The Mysterious Case of webpack, AngularJS and jQuery",
  "description": "Angular can use jQuery instead of jQLite, but this becomes complicated when using webpack. We need to use the ProvidePlugin function in webpack.config.js.",
  "publishedAt": "2016-05-24T00:00:00.000Z",
  "textContent": "You may know that Angular ships with a cutdown version of jQuery called jQLite. It's still possible to use the full-fat jQuery; to quote the docs:\n\n\n\n> To use jQuery, simply ensure it is loaded before the angular.js file.\n\nNow the wording rather implies that you're not using any module loader / bundler. Rather that all files are being loaded via script tags and relies on the global variables that result from that. True enough, if you take a look at the Angular source you can see how this works:\n\nAmongst other things it looks for a jQuery variable which has been placed onto the window object. If it is found then jQuery is used; if it is not then it's jqLite all the way.\n\nBut wait! I'm using webpack\n\nMe too! And one of the reasons is that we get to move away from reliance upon the global scope and towards proper modularisation. So how do we get Angular to use jQuery given the code we've seen above? Well, your first thought might be to npm install yourself some jQuery and then make sure you've got something like this in your entry file:\n\nWrong.\n\nYou need the ProvidePlugin\n\nIn your webpack.config.js you need to add the following entry to your plugins:\n\nThis uses the webpack ProvidePlugin and, at the point of webpackification (© 2016 John Reilly) all references in the code to window.jQuery will be replaced with a reference to the webpack module that contains jQuery. So when you look at the bundled file you'll see that the code that checks the window object for jQuery has become this:\n\nThat's right; webpack is providing Angular with jQuery whilst still _not_ placing a jQuery variable onto the window. Neat huh?",
  "canonicalUrl": "https://johnnyreilly.com/posts/the-mysterious-case-of-webpack-angular-and-jquery"
}