title: Bootstrap datepicker not working with Webpack
body: <p>I have created a aspnet core spa project with react using dotnet core spa stater template. I am using the default webpack configuration came with that stater template. I tried to include bootstrap date-picker. </p>
  
  <p>I tried with:
  npm i bootstrap-datepicker
  Adding it to entry point and importing it from boot.tsx.
  It's giving me:
  $(...).datepicker is not a function</p>
  
  <p>I got the same results with:
  npm i eonasdan-bootstrap-datetimepicker</p>
  
  <p>I tried with: 
  npm install bootstrap-datepicker-webpack
  It's giving me:
  jQuery is not defined</p>
  
  <p>Following is my webpack.config.vendor.js</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  module.exports = (env) =&gt; {
      const extractCSS = new ExtractTextPlugin('vendor.css');
      const isDevBuild = !(env &amp;&amp; env.prod);
      return [{
          stats: { modules: false },
          resolve: {
              extensions: ['.js'],
              alias: {
                  jquery: Path.join(__dirname, 'node_modules/jquery/dist/jquery')
              }
          },
          module: {
              rules: [
                  { test: /\.(svg|woff|woff2|eot|ttf)(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=100000' },
                  { test: /\.css(\?|$)/, use: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) },
                  {
                      test: /\.less$/,
                      use: [{
                          loader: "style-loader" // creates style nodes from JS strings
                      }, {
                          loader: "css-loader" // translates CSS into CommonJS
                      }, {
                          loader: "less-loader" // compiles Less to CSS
                      }]
                  }
              ]
          },
          entry: {
              vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'event-source-polyfill', 'isomorphic-fetch', 'react', 'react-dom', 'react-router-dom', 'jquery', 'font-awesome-webpack', 'bootstrap-datepicker'],
          },
          output: {
              path: path.join(__dirname, 'wwwroot', 'dist'),
              publicPath: '/dist/',
              filename: '[name].js',
              library: '[name]_[hash]',
          },
          plugins: [
              extractCSS,
              new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
              new webpack.DllPlugin({
                  path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                  name: '[name]_[hash]'
              }),
              new webpack.DefinePlugin({
                  'process.env.NODE_ENV': isDevBuild ? '"development"' : '"production"'
              })
          ].concat(isDevBuild ? [] : [
              new webpack.optimize.UglifyJsPlugin()
          ])
      }];
  };
  </code></pre>
  
  <p>Following is my webpack.config.js</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
  const bundleOutputDir = './wwwroot/dist';
  
  module.exports = (env) =&gt; {
      const isDevBuild = !(env &amp;&amp; env.prod);
      return [{
          stats: { modules: false },
          entry: { 'main': './ClientApp/boot.tsx' },
          resolve: {
              extensions: ['.js', '.jsx', '.ts', '.tsx']
          },
          output: {
              path: path.join(__dirname, bundleOutputDir),
              filename: '[name].js',
              publicPath: '/dist/'
          },
          module: {
              rules: [
                  { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                  { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                  { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'file-loader?name=[name].[ext]&amp;outputPath=img/' },
                  {
                      test: /\.less$/,
                      use: [{
                          loader: "style-loader" // creates style nodes from JS strings
                      }, {
                          loader: "css-loader" // translates CSS into CommonJS
                      }, {
                          loader: "less-loader" // compiles Less to CSS
                      }]
                  }
              ]
          },
          plugins: [
              new CheckerPlugin(),
              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(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
              })
          ] : [
                  // Plugins that apply in production builds only
                  new webpack.optimize.UglifyJsPlugin(),
                  new ExtractTextPlugin('site.css')
              ])
      }];
  };
  </code></pre>
  
  <p>In the boot.tsx file I have defined the imports like this:</p>
  
  <pre><code>import './css/site.css';
  import './css/AdminLTE.css';
  import './css/skin-black.css';
  import 'jquery';
  import './js/morris.js';
  import './js/app.js';
  import './js/dashboard.js';
  import './js/demo.js';
  import 'font-awesome-webpack';
  import 'bootstrap';
  import 'bootstrap-datepicker';
  import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { AppContainer } from 'react-hot-loader';
  import { BrowserRouter } from 'react-router-dom';
  import * as RoutesModule from './routes';
  let routes = RoutesModule.routes;
  </code></pre>
  
  <p>Apart from what I have mentioned, I have tried importing the packages in my webpack.config.js, I tried importing the js and css files separately. Nothing worked. I am getting the same error. I tried importing the 3 packages I have mentioned above (the files show only bootstrap-datepicker, but I tried to add all 2 packages). Nothing worked.</p>
  
  <p>Another problem I see is, If I don't import jquery like this</p>
  
  <pre><code>var jQuery = $ = require('jQuery');  
  </code></pre>
  
  <p>in my custom js files, it's complaining that jquery is not defined, even though it is exported using the webpack.ProvidePlugin. I don't know whether it is a related issue.</p>
  
  <p>Adding alias to the config file is a fix I found in github. I tried with and without it, still getting the same error. Any solutions?    </p>