How to include jQuery before angular in webpack with ES6?

Question

I've tried to have this:

import $ from 'jquery';
window.jQuery = $;
import angular from 'angular';

but $.fn.scope is undefined and scripts inside ng-bind-html don't work Injecting a script tag with ngBindHtml

also tried this in webpack config

module.exports = {
  module: {
    loaders: [
       { test: /angular(\.min)?\.js$/, loader: "imports?$=jquery" },
       { test: /jquery(\.min)?\.js$/, loader: 'expose?jQuery' }
    ]
  }
};

but got error:

ERROR in ./~/angular/angular.js
Module not found: Error: Cannot resolve module 'expose' in C:\project\src\ui\node_modules\angular
 @ ./~/angular/angular.js 2:8-25

Answer 1

this work:

module.exports = {
  module: {
    loaders: [
       { test: /angular(\.min)?\.js$/, loader: "imports?$=jquery" },
       { test: /jquery(\.min)?\.js$/, loader: 'expose?jQuery' }
    ]
  }
};

but you need to install expose-loader from npm:

npm install expose-loader --save

Answer 2

Why not use a very nice and simple plugin for webpack

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
})

ES6-seed with webpack and jquery