title: Webpack inline font with url-loader
body: <p>I’m trying to inline some fonts as base64-encoded Data URI’s but am having no luck with Webpack’s url-loader. Which is weird because the url-loader seems to be doing just that for my image and svg files. My setup is below:</p>
  
  <p><strong>directory structure</strong></p>
  
  <pre><code>root/
  |-src/
  |--assets/
  |
  |----fonts/
  |      icon-fonts/
  |        fontawesome.woff2
  |
  |----styles/
  |      fonts.css
  |
  |--components/
  |   main.component.js
  |...
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>module: {
    loaders: [
      {
        test: /\.(jpg|png|svg|woff2)$/,
        exclude: /node_modules/,
        loader: 'url?limit=100000&amp;name=[name]-[sha512:hash:base64:7].[ext]'
      },
    ]
  }
  </code></pre>
  
  <p><strong>fonts.css</strong></p>
  
  <pre><code>@font-face {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/icon-fonts/fontawesome.woff2') format('woff2');
  }
  </code></pre>
  
  <p><strong>main.component.js</strong></p>
  
  <pre><code>import fonts from '../assets/styles/fonts.css'
  import React from 'react'
  
  export class App extends React.Component {
    ...
  }
  </code></pre>
  
  <p><strong>output</strong></p>
  
  <p><a href="https://i.stack.imgur.com/zZcG5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zZcG5.png" alt="output"></a></p>