title: Webpack import bootstrap .js and .css
body: <p>I am building an app using react, bootstrap and webpack using es6 with babel.</p>
  
  <p>But I can't import boostrap.js and bootstrap.css to my app.</p>
  
  <p>My webpack.config.js </p>
  
  <pre><code>    var webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    path = require('path'),
    srcPath = path.join(__dirname, 'src');
  
  module.exports = {
    target: 'web',
    cache: true,
    entry: {
      module: path.join(srcPath, 'module.js'),
      common: ['react', 'react-router', 'alt']
    },
    resolve: {
      root: srcPath,
      extensions: ['', '.js'],
      modulesDirectories: ['node_modules', 'src']
    },
    output: {
      path: path.join(__dirname, 'tmp'),
      publicPath: '',
      filename: '[name].js',
      library: ['Example', '[name]'],
      pathInfo: true
    },
  
    module: {
      loaders: [
        {test: /\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'}
      ]
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin('common', 'common.js'),
      new HtmlWebpackPlugin({
        inject: true,
        template: 'src/index.html'
      }),
      new webpack.ProvidePlugin({
             $: "jquery",
             jQuery: "jquery"
      }),
      new webpack.ProvidePlugin({
             bootstrap: "bootstrap.css",
      }),
      new webpack.NoErrorsPlugin()
    ],
  
    debug: true,
    devtool: 'eval-cheap-module-source-map',
    devServer: {
      contentBase: './tmp',
      historyApiFallback: true
    }
  };
  </code></pre>
  
  <p>So in my .js files (react components) I am trying to do: import 'bootstrap'. But the css is not being implemented. The .js imports works well.</p>
  
  <p>So how can I import boostrap or configure webpack?</p>