title: Configuring webpack with bootstrap
body: <p>I use webpack with bootstrap, but can't get bootstrap fonts in my application. </p>
  
  <p>Path <code>/Users/and/devel/webpack_bootstrap/</code> is root folder of project. </p>
  
  <p>I get errors:</p>
  
  <pre><code>jquery.js:9077 GET file:///Users/and/devel/webpack_bootstrap/448c34a56d699c29117adc64c43affeb.woff2 net::ERR_FILE_NOT_FOUND
  GET file:///Users/and/devel/webpack_bootstrap/fa2772327f55d8198301fdb8bcfc8158.woff net::ERR_FILE_NOT_FOUND
  GET file:///Users/and/devel/webpack_bootstrap/e18bbf611f2a2e43afc071aa2f4e1512.ttf net::ERR_FILE_NOT_FOUND
  </code></pre>
  
  <p>Files </p>
  
  <p><code>448c34a56d699c29117adc64c43affeb.woff2, fa2772327f55d8198301fdb8bcfc8158.woff, e18bbf611f2a2e43afc071aa2f4e1512.ttf</code> </p>
  
  <p>are generated into <code>/Users/and/devel/webpack_bootstrap/dist</code> folder after compilation</p>
  
  <p>I tried <a href="https://github.com/gowravshekar/bootstrap-webpack" rel="nofollow noreferrer">bootstrap-webpack</a>, but still get the same errors.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "Webpack_bootstrap",
    "version": "1.0.0",
    "description": "webpack bootstrap test",
    "main": "index.js",
    "scripts": {
      "start": "npm run serve | npm run dev",
      "serve": "./node_modules/.bin/http-server -p 8080",
      "dev": "webpack-dev-server -d --progress --colors --port 8090"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "bootstrap": "^3.3.6",
      "bootstrap-select": "^1.9.3",
      "bootstrap-table": "^1.9.1",
      "bootstrap-webpack": "0.0.5",
      "bower-webpack-plugin": "^0.1.9",
      "css-loader": "^0.23.0",
      "eonasdan-bootstrap-datetimepicker": "^4.15.35",
      "events": "^1.1.0",
      "exports-loader": "^0.6.2",
      "extract-text-webpack-plugin": "^0.9.1",
      "file-loader": "^0.8.5",
      "http-server": "^0.8.5",
      "jquery": "^2.1.4",
      "jquery-resizable-columns": "^0.2.3",
      "jquery-slimscroll": "^1.3.6",
      "jquery-ui": "^1.10.5",
      "less": "^2.5.3",
      "less-loader": "^2.2.2",
      "lodash": "^3.10.1",
      "moment": "^2.10.6",
      "node-sass": "^3.4.2",
      "object-assign": "^4.0.1",
      "path": "^0.12.7",
      "sass-loader": "^3.1.2",
      "select2": "^4.0.1",
      "select2-bootstrap-css": "^1.4.6",
      "style-loader": "^0.13.0",
      "svg-sprite-loader": "0.0.15",
      "typeahead.js": "^0.11.1",
      "url-loader": "^0.5.7",
      "webpack": "^1.12.9",
      "webpack-dev-server": "^1.14.0"
    }
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
  var BowerWebpackPlugin = require("bower-webpack-plugin");
  var path = require('path');
  
  module.exports = {
      cache: true,
      entry: {
        index: './src/script/index.js'
      },
      output: {
          path: path.join(__dirname, './dist'),
          filename: '[name].js',
          sourceMapFilename: "[file].map"
      },
      debug: true,
      devtool: 'source-map',
      module: {
        loaders: [
        // **IMPORTANT** This is needed so that each bootstrap js file required by
        // bootstrap-webpack has access to the jQuery object
        { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
  
        // Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
        // loads bootstrap's css.
        {
          test: /\.scss$/,
          loaders: [ 'style', 'css', 'sass' ]
        },
        {
          test: /\.less$/,
          loaders: [ 'style', 'css', 'less' ]
        },
        {
          test: /\.css$/,
          loaders: [ 'style', 'css']
        },
        {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=application/font-woff'},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=application/octet-stream'},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&amp;mimetype=image/svg+xml'}
      ]
      },
      plugins: [
          new BowerWebpackPlugin(),
          new CommonsChunkPlugin('index', 'index.js', Infinity)
      ],
      resolve: {
          extensions: ['', '.js', '.jsx']
      }
  };
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Won&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;script type="text/javascript" src="./dist/index.js"&gt;&lt;/script&gt;
  
      &lt;div id="content"&gt;
  
        &lt;!-- Button trigger modal --&gt;
        &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
          Launch demo modal
        &lt;/button&gt;
  
        &lt;!-- Modal --&gt;
        &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
          &lt;div class="modal-dialog" role="document"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                &lt;button type="button" class="btn btn-default btn-lg"&gt;
                  &lt;span class="glyphicon glyphicon-star" aria-hidden="true"&gt;&lt;/span&gt; Star
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>src -> script -> index.js</strong></p>
  
  <pre><code>var bootstrap = require('bootstrap-webpack');
  </code></pre>
  
  <p>Edit: I use <a href="http://andrejgajdos.com/setting-up-webpack-for-es6-react-sass-and-bootstrap/" rel="nofollow noreferrer">this webpack config</a> and everything works.</p>