title: Import jQuery Plugin. Angular 2 & Webpack
body: <p>This is turning out to be more frustrating than I expected. </p>
  
  <p>I've figured out how to include things like jQuery and bootstrap in my Webpack build process. But one of the 3rd party angular directives I've added require a specific jQuery plugin to be available on the global $ scope... for the life of me I cant find a simple clear example of how to do this.</p>
  
  <p><strong>This is the error code I keep getting:</strong></p>
  
  <blockquote>
    <p>Error: Error in ./SomeComponent class SomeComponent
    - inline template:5:32 caused by: $(...).selectize is not a function</p>
  </blockquote>
  
  <p>I've seen examples of using script-loader, expose-loader, using resolve with an alias set, I've tried them all... but I don't seem to be having much luck as I'm new to Webpack, and I've probably managed to confuse myself more than anything in the last 2 days. I think I'm mixing different solutions, which might be adding to the chaos.</p>
  
  <p>I've read through this <a href="https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack?noredirect=1&amp;lq=1">post</a> a few times, and it only explains how to load, jQuery itself... but not a jQuery plugin. </p>
  
  <p>(some code excluded for brevity)</p>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>module.exports = {
    module: {
      loaders: [
        {
          test: /bootstrap-sass[\/\\]assets[\/\\]javascripts[\/\\]/,
          use: 'imports-loader?jQuery=jquery'
        },
        {
          test: require.resolve('selectize'),
          use: 'expose-loader?$!expose?selectize'
        }
      ]
    },
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery",
        jQuery:"jquery"
      }),
    resolve: {
      alias: {
        'selectize': path.resolve(
          __dirname,
          '../selectize/dist/js/selectize.min.js'
        )
      },
      extensions: [
        '.webpack.js',
        '.web.js',
        '.js',
        '.ts'
      ]
    },
    entry: {
      vendor: [
         ..
      ],
      main: `./${conf.path.src('index')}`
    }
  };
  </code></pre>
  
  <p><strong>app.ts</strong></p>
  
  <pre><code>import 'script-loader!selectize';
  </code></pre>
  
  <p><strong>Thus my question:</strong></p>
  
  <p>How do I load a 3rd party jQuery plugin in an Angular 2 application making use of a Webpack 2 module loader / build process.</p>