title: Configure fonts in webpack
body: <p>I have a slight problem with webpack here; I'm somewhat unable to load fonts.
  This is my webpack.config.js</p>
  
  <pre><code>const nodeExternals = require('webpack-node-externals');
  const path = require('path');
  const devMode = true;
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  module.exports = {
      entry:
          [
              './src/main.js',
              './scss/main.scss'
          ],
  
      output: {
          filename: "main.min.js",
          chunkFilename: '[name].bundle.min.js?bust=[chunkhash]',
          path: path.resolve(__dirname, 'static_root'),
          publicPath: "/assets/"
      },
      target: "node",
      externals: [nodeExternals()],
      plugins: [
          new MiniCssExtractPlugin({
              filename: '[name].css',
              chunkFilename: '[id].css',
              ignoreOrder: false, // Enable to remove warnings about conflicting order
          }),
      ],
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use: {
                      loader: "babel-loader"
                  }
              },
              {
                  test: /\.scss$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: '[name].css',
                              outputPath: 'css/'
                          }
                      },
                      {
                          loader: 'extract-loader'
                      },
                      {
                          loader: 'css-loader'
                      },
                      {
                          loader: 'postcss-loader'
                      },
                      {
                          loader: 'sass-loader'
                      }
                  ]
              },
              {
                  test: /\.css$/,
                  use: [
                      {
                          loader: MiniCssExtractPlugin.loader,
                          options: {
                              publicPath: '../',
                              hmr: process.env.NODE_ENV == 'development',
                          }
                      },
                  ],
              },
              {
                  test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                  loader: 'url-loader',
                  options: {
                      limit: 10000,
                      name: '[name].[ext]'
                  }
              }
          ]
      }
  };
  </code></pre>
  
  <p>This builds my css although then my local fonts aren't included / aren't rendered.. This also copies my Font to /static_root (which is where the css gets built to).</p>
  
  <p>so I end up with this directory structure:</p>
  
  <pre><code>public/static_root/css/main.css
  public/static_root/BebasNeue-Regular.ttf
  public/static_root/main.min.js
  </code></pre>
  
  <p>I thought about just adjusting the path to the font in my scss file unfortunately though this lets the build process fail, since my working dir and the output root aren't the same.</p>
  
  <p>My scss/font-directory is structured like so:</p>
  
  <pre><code>/public/scss/fonts/_fonts.scss
  /public/scss/fonts/BebasNeueRegular.ttf
  /public/scss/main.scss
  </code></pre>
  
  <p>So how can I achieve the inclusion of the font or how is this usually done since I found lots of different approaches online, that sadly didn't work out for me.</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Greetings, 
  derelektrischemoench</p>