Bootstrap not loading with dev server

Question

I have a webpack build which is serving me fine, the only problem is, I am running Bootstrap for styling, but I have brought that in through a CDN link in my index.ejs file.

This is fine when I build my application as this is my template file, but it doesn't load Bootstrap when I am running webpack-dev-server.

I have read around and tried a few things, including Boostrap Loader - but that just made my dev-server freak out with multiple errors.

Is there a reasonably simple fix for this?

Any help appreciated.

UPDATE (@Kesh Shan)

Ok, as suggested I have tried to go down the npm route. Here is my process:

I installed bootstrap and jquery npm modules. Apparently these needed the peer dependencies file-loader and extract-text-webpack-plugin@1.0.1, both of which I have now installed. Do I need to reference these loaders in my webpack.config.js? Here it is as it stands:

webpack.config.js

"use strict";

const debug = process.env.NODE_ENV !== "production";

const webpack = require('webpack');
const path = require('path');

module.exports = {
  devtool: debug ? 'inline-sourcemap' : null,
  entry: path.join(__dirname, 'src', 'app-client.js'),
  devServer: {
    inline: true,
    port: 3333,
    contentBase: "src/static/",
    historyApiFallback: {
      index: '/index-static.html'
    }
  },
  output: {
    path: path.join(__dirname, 'src', 'static', 'js'),
    publicPath: "/js/",
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
         test: path.join(__dirname, 'src'),
         loader: ['babel-loader'],
         query: {
            cacheDirectory: 'babel_cache',
            presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015']
         }
      },
      { test: /\.css$/, loader: "style-loader!css-loader" },
      { test: /\.png$/, loader: "url-loader?limit=100000" },
      { test: /\.jpg$/, loader: "file-loader" }
   ]
  },
  plugins: debug ? [
     new webpack.ProvidePlugin({
         $: "jquery",
         jQuery: "jquery"
         })
  ] : [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      mangle: true,
      sourcemap: false,
      beautify: false,
      dead_code: true
    }),
    // as suggested at http://stackoverflow.com/questions/37651015/webpack-using-bootstrap-jquery-is-not-defined
    new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
   })
  ]
};

Finally, here is my entry js file:

app-client.js

'use strict';

import React from 'react';
import ReactDOM from 'react-dom';
import AppRoutes from './components/AppRoutes';

global.jQuery = require('jquery');

// import bootstrap from 'bootstrap'
require('bootstrap');

// import css
import css from './static/css/style.css';

window.onload = () => {
   ReactDOM.render(<AppRoutes/>,
      document.getElementById('main')
   );
};

Now I have switched import bootstrap from 'bootstrap' for require('bootstrap') (the page renders ok - the console message saying transition.js:59Uncaught ReferenceError: jQuery is not defined(…) no longer shows in the console).

Still no Bootstrap styling though :(