title: jQuery is not defined in angular/webpack site
body: <p><a href="https://i.stack.imgur.com/EpBlv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EpBlv.png" alt="Screen grab"></a></p>
  
  <p>Hi:
  Could someone please explain to  me why <code>jQuery</code> is not defined?
  It's part of the <code>vendor.js</code> file (webpack) and is mentioned in it hundreds of times in <code>vendor.js</code>, such as <code>* jQuery JavaScript Library v2.2.4</code> so it is definitely loaded.</p>
  
  <p>It makes no sense why jquery-ui can't see it, but I've had weeks of this rubbish with Angular 2. In the old days (1 month ago) you made sure you loaded a file before the rest and you were sorted.</p>
  
  <p>Sure I can get the 2 dependents (UI &amp; jasny) to  run if include 'actual' <code>&lt;script&gt;hardrive/bla/jquery.js</code> in the <code>_Layout.shtml</code>, but whats the point if the webpack is also  including it in the vendor file?</p>
  
  <p>All part of a bigger problem of getting an simple old </p>
  
  <pre><code>.animation = $({
      countNum: from
  })
  </code></pre>
  
  <p>to  run, which I've been at 2 weeks now, which already works in angularjs.
  WebPack files:</p>
  
  <pre><code>    const path = require('path');
      const webpack = require('webpack');
      const merge = require('webpack-merge');
      const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
  
      module.exports = (env) =&gt; {
          // Configuration in common to both client-side and server-side bundles
          const isDevBuild = !(env &amp;&amp; env.prod);
          const sharedConfig = {
              stats: { modules: false },
              context: __dirname,
              resolve: { extensions: [ '.js', '.ts' ] },
              output: {
                  filename: '[name].js',
                  publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
              },
              module: {
                  rules: [
                      { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                      { test: /\.html$/, use: 'html-loader?minimize=false' },
                      { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
  
                      //{
                      //    test    : /\.(png|jpg|jpeg)$/,
                      //    include : path.join(__dirname, 'img'),
                      //    loader  : 'url-loader?limit=25000&amp;name=images/[name].[ext]'
                      //},
                      //{test: /\.png$/, loader: 'file?name=images/[name].[ext]',},
                  ]
              },
              plugins: [
                  new CheckerPlugin(),
                new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),
              ]
  
  
          };
  
  
  
  
  
  
          // Configuration for client-side bundle suitable for running in browsers
          const clientBundleOutputDir = './wwwroot/dist';
          const clientBundleConfig = merge(sharedConfig, {
              entry: { 'main-client': './ClientApp/boot-client.ts' },
              output: { path: path.join(__dirname, clientBundleOutputDir) },
              plugins: [
                  new webpack.DllReferencePlugin({
                      context: __dirname,
                      manifest: require('./wwwroot/dist/vendor-manifest.json')
                  })
              ].concat(isDevBuild ? [
                  // Plugins that apply in development builds only
                  new webpack.SourceMapDevToolPlugin({
                      filename: '[file].map', // Remove this line if you prefer inline source maps
                      moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
                  })
              ] : [
                  // Plugins that apply in production builds only
                  new webpack.optimize.UglifyJsPlugin()
              ])
          });
  
          // Configuration for server-side (prerendering) bundle suitable for running in Node
          const serverBundleConfig = merge(sharedConfig, {
              resolve: { mainFields: ['main'] },
              entry: { 'main-server': './ClientApp/boot-server.ts' },
              plugins: [
                  new webpack.DllReferencePlugin({
                      context: __dirname,
                      manifest: require('./ClientApp/dist/vendor-manifest.json'),
                      sourceType: 'commonjs2',
                      name: './vendor'
                  })
              ],
              output: {
                  libraryTarget: 'commonjs',
                  path: path.join(__dirname, './ClientApp/dist')
              },
              target: 'node',
              devtool: 'inline-source-map'
          });
  
          return [clientBundleConfig, serverBundleConfig];
      };
  
      const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const merge = require('webpack-merge');
  
  
  module.exports = (env) =&gt; {
      const extractCSS = new ExtractTextPlugin('vendor.css');
  
      const isDevBuild = !(env &amp;&amp; env.prod);
      const sharedConfig = {
          stats: { modules: false },
          resolve: { extensions: [ '.js' ] },
          module: {
              rules: [
                  { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
              ]
          },
          entry: {
              vendor: [
                  '@angular/common',
                  '@angular/compiler',
                  '@angular/core',
                  '@angular/http',
                  '@angular/platform-browser',
                  '@angular/platform-browser-dynamic',
                  '@angular/router',
                  '@angular/platform-server',
                  'angular2-universal',
                  'angular2-universal-polyfills',
                  'bootstrap',
                  'bootstrap/dist/css/bootstrap.css',
                  'es6-shim',
                  'es6-promise',
                  'event-source-polyfill',
                  'jquery',
                  'zone.js',
              ]
          },
          output: {
              publicPath: '/dist/',
              filename: '[name].js',
              library: '[name]_[hash]'
          },
          plugins: [
              new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
              new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
              new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
          ]
      };
  
      const clientBundleConfig = merge(sharedConfig, {
          output: { path: path.join(__dirname, 'wwwroot', 'dist') },
          module: {
              rules: [
                  { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) },
                  { test: require.resolve('jquery/jquery'), loader: 'expose?jQuery!expose?$' }
              ]
          },
          plugins: [
              extractCSS,
              new webpack.DllPlugin({
                  path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                  name: '[name]_[hash]'
              })
          ].concat(isDevBuild ? [] : [
              new webpack.optimize.UglifyJsPlugin()
          ])
      });
  
      const serverBundleConfig = merge(sharedConfig, {
          target: 'node',
          resolve: { mainFields: ['main'] },
          output: {
              path: path.join(__dirname, 'ClientApp', 'dist'),
              libraryTarget: 'commonjs2',
          },
          module: {
              rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] } ]
          },
          entry: { vendor: ['aspnet-prerendering'] },
          plugins: [
              new webpack.DllPlugin({
                  path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                  name: '[name]_[hash]'
              })
          ]
      });
  
      return [clientBundleConfig, serverBundleConfig];
  }
  </code></pre>