title: Bootstrap Material Design with Webpack
body: <p>perhaps a really rookie webpack question, but here i go:</p>
  
  <p>Was wondering (since i really havent found any direct answers) if anyone could give me a hint on how to get <a href="http://fezvrasta.github.io/bootstrap-material-design/" rel="nofollow">bootstrap material design</a> working? I get the css stuff going for me but not the ripples.js stuff...</p>
  
  <p>my webpack setup, well bits of it:</p>
  
  <pre><code>  ...
  plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ],
  module: {
  loaders: [
         { test: /\.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' },
         { test: /\.css$/, loader: 'style-loader!css-loader' },
         { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
         { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&amp;limit=5000" },
         { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&amp;mimetype=application/octet-stream" },
         { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&amp;mimetype=image/svg+xml" }
  ]
  }
  ...
  </code></pre>
  
  <p>in my react's index.js which is where it all starts:</p>
  
  <pre><code>...
  import Bootstrap from 'bootstrap/dist/css/bootstrap.css'
  require('bootstrap-material-design/dist/css/bootstrap-material-design.css')
  require('bootstrap-material-design/dist/css/ripples.min.css')
  ...
  </code></pre>
  
  <p>how would i get the material.js and ripples.js to work?</p>
  
  <p>i get no console errors or webpack errors, but the darn ripples are not showing! i am guessing there is a smart webpack way to get this all running or do i need to require the .js explicitly in my index.js (that has not worked)?</p>
  
  <p>thanks in advance, </p>
  
  <p>hanto899</p>
  
  <p><strong>UPDATE:</strong>
  if i require the following in my index.js file:</p>
  
  <pre><code> require('bootstrap/dist/css/bootstrap.css')
  require('bootstrap-material-design/dist/css/bootstrap-material-design.min.css')
  require('bootstrap-material-design/dist/css/ripples.min.css') 
  
  require('bootstrap')
  var material = require('bootstrap-material-design/dist/js/material.js') // not sure if the "var material =" is necessary here...
  var ripples = require('bootstrap-material-design/dist/js/ripples.js') // not sure if the "var material =" is necessary here...
  
  let $ = require('jquery')
  $.material.init()
  </code></pre>
  
  <p>i get no errors, but ripple doesnt work. but... if i navigate to another page, and add, while on that page, :</p>
  
  <pre><code>let $ = require('jquery')
  $.material.init()
  </code></pre>
  
  <p>webpack hot-reloads and then i get the ripple working. howerver if i refresh the page, i get:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'init' of undefined
  </code></pre>
  
  <p>....</p>