title: How do I configure webpack to run bootstrap and sass?
body: <p>I am not great at webpack. I have not really 'learned it', I have a template/boilerplate I pull from a repo I made that gives me an environment to build in React. I am struggling to add bootstrap functionality to my projects because I am not great with webpack and understanding how loaders etc. work. Can someone give me a hand? And maybe a simple explanation about webpack loaders? (It is on my list to learn it, but just not a priority).</p>
  
  <p>I get strange errors like: </p>
  
  <p>ERROR in ./~/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2</p>
  
  <p>Here is my webpack.config.js</p>
  
  <pre><code>var webpack = require('webpack');
  var path = require('path');
  
  
  var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
  var APP_DIR = path.resolve(__dirname, 'src/client/app');
  
  var config = {
    entry: APP_DIR + '/index.jsx',
    output: {
      path: BUILD_DIR,
      filename: 'bundle.js'
    },
    module : {
      loaders : [
        {
          test : /\.jsx?/,
          include : APP_DIR,
          loader : 'babel'
        },
        {
          test: /\.scss$/,
          loaders: ["style", "css", "sass"]
        }
      ]
    }
  };
  
  module.exports = config;
  </code></pre>
  
  <p>Here is my package.json</p>
  
  <pre><code>{
    "name": "react-camper-leaderboard",
    "version": "1.0.0",
    "description": "freecodecamp leaderboard sorter",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "dev": "webpack -d --watch",
      "build": "webpack -p"
    },
    "author": "Tim Bell",
    "license": "ISC",
    "dependencies": {
      "babel-loader": "^6.2.2",
      "babel-preset-es2015": "^6.5.0",
      "babel-preset-react": "^6.5.0",
      "bootstrap": "^4.0.0-alpha.2",
      "bootstrap-loader": "^1.0.8",
      "bootstrap-sass": "^3.3.6",
      "css-loader": "^0.23.1",
      "file-loader": "^0.8.5",
      "node-sass": "^3.4.2",
      "react": "^0.14.7",
      "react-dom": "^0.14.7",
      "resolve-url-loader": "^1.4.3",
      "sass-loader": "^3.1.2",
      "style-loader": "^0.13.0",
      "url-loader": "^0.5.7"
    },
    "devDependencies": {
      "css-loader": "^0.23.1",
      "node-sass": "^3.4.2",
      "sass-loader": "^3.1.2",
      "webpack": "^1.12.13"
    },
    "babel": {
      "presets": [
        "es2015",
        "react"
      ]
    }
  }
  </code></pre>