Webpack: how to make angular auto-detect jQuery and use it as angular.element instead of jqLite?

Question

I\'m using Webpack to build an Angular 1.4 project. The project makes use of several jQuery plugins, which are wrapped into angular directives. Those directives internally use <

Answer 1

There is this japanese article I want to use the jQuery not jQLite in webpack + AngularJS that seems to talk about the same problem (I don't know Japanese yet btw). I used google to translate to english, credits goes to cither for this nice answer.

He provides four ways to solve this:

1. Assign directly to the window (not really cool)

   window.jQuery = require('jquery');
   var angular = require('angular');
   console.log(angular.element('body'));
   //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]
   

2. Use the expose-loader (ok, but not that cool)

   npm install --saveDev expose-loader
   

   webpack.config.js

   module.exports = {
       entry: "./index",
       output: {
           path: __dirname,
           filename: "bundle.js"
       },
       module: {
           loaders: [{
               test: /\/jquery.js$/,
               loader: "expose?jQuery"
           }]
       }
   };
   

   usage:

   require('jquery');
   var angular = require('angular');
   console.log(angular.element('body'));
   //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]
   

3. Use expose-loader (better)

   npm install --saveDev expose-loader
   

   webpack.config.js

       module.exports = {
       entry: "./index",
       output: {
           path: __dirname,
           filename: "bundle.js"
       },
       module: {
           loaders: [{
               test: /\/angular\.js$/,
               loader: "imports?jQuery=jquery"
           }, {
               test: /\/jquery.js$/,
               loader: "expose?jQuery"
           }]
       }
   };
   

   usage:

   var angular = require('angular');
   console.log(angular.element('body'));
   //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]
   

4. Use ProvidePlugin (Best solution)

   This is actually the same as studds's accepted answer here

   module.exports = {
       entry: "./index",
       output: {
           path: __dirname,
           filename: "bundle.js"
       },
       plugins: [
           new webpack.ProvidePlugin({
               "window.jQuery": "jquery"
           })
       ],
   };
   

   usage:

   var angular = require('angular');
   console.log(angular.element('body'));
   //[body, prevObject: jQuery.fn.init[1], context: document, selector: "body"]
   

I thought I'd share this here since we had the exact same problem. We used the expose-loader solution in our project with success. I suppose that the ProvidePlugin which injects jquery directly in window is also a good idea.