WebPack config file that handles web-font export from a fonts.css import in your main project.

fonts.css

@font-face {
    font-family: 'HKGrotesk';
    src:url('../fonts/hkgrotesk-light.eot');
    src:url('../fonts/hkgrotesk-light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/hkgrotesk-light.woff2') format('woff2'),
        url('../fonts/hkgrotesk-light.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'HKGrotesk';
    src:url('../fonts/hkgrotesk-lightitalic.eot');
    src:url('../fonts/hkgrotesk-lightitalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/hkgrotesk-lightitalic.woff2') format('woff2'),
        url('../fonts/hkgrotesk-lightitalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'HKGrotesk';
    src:url('../fonts/hkgrotesk-regular.eot');
    src:url('../fonts/hkgrotesk-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/hkgrotesk-regular.woff2') format('woff2'),
        url('../fonts/hkgrotesk-regular.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:url('../fonts/hkgrotesk-italic.eot');
  src:url('../fonts/hkgrotesk-italic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/hkgrotesk-italic.woff2') format('woff2'),
      url('../fonts/hkgrotesk-italic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'HKGrotesk';
  src:url('../fonts/hkgrotesk-medium.eot');
  src:url('../fonts/hkgrotesk-medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/hkgrotesk-medium.woff2') format('woff2'),
      url('../fonts/hkgrotesk-medium.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:url('../fonts/hkgrotesk-mediumitalic.eot');
  src:url('../fonts/hkgrotesk-mediumitalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/hkgrotesk-mediumitalic.woff2') format('woff2'),
      url('../fonts/hkgrotesk-mediumitalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
}

@font-face {
    font-family: 'HKGrotesk';
    src:url('../fonts/hkgrotesk-semibold.eot');
    src:url('../fonts/hkgrotesk-semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/hkgrotesk-semibold.woff2') format('woff2'),
        url('../fonts/hkgrotesk-semibold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'HKGrotesk';
    src:url('../fonts/hkgrotesk-semibolditalic.eot');
    src:url('../fonts/hkgrotesk-semibolditalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/hkgrotesk-semibolditalic.woff2') format('woff2'),
        url('../fonts/hkgrotesk-semibolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
  font-family: 'HKGrotesk';
  src:url('../fonts/hkgrotesk-bold.eot');
  src:url('../fonts/hkgrotesk-bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/hkgrotesk-bold.woff2') format('woff2'),
      url('../fonts/hkgrotesk-bold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'HKGrotesk';
  src:url('../fonts/hkgrotesk-bolditalic.eot');
  src:url('../fonts/hkgrotesk-bolditalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/hkgrotesk-bolditalic.woff2') format('woff2'),
      url('../fonts/hkgrotesk-bolditalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
}

webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const WorkboxPlugin = require('workbox-webpack-plugin')
const Dotenv = require('dotenv-webpack')

module.exports = {
  mode: 'production',
  entry: {
    index: path.resolve(__dirname, './src/js/index.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[name].js',
    publicPath: '/',
    chunkFilename: 'bundle.[name].js',
  },
  plugins: [
    new Dotenv(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './src/index.html'),
      favicon: './src/images/favicon.png'
    }),
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  },
  resolve: {
    symlinks: true,
    extensions: ['*', '.js', '.jsx', '.less', '.scss'],
    alias: {
      "styled-components": path.resolve("./node_modules", "styled-components"),
    }
  },
  devServer:{
    contentBase: path.resolve(__dirname, 'dist'),
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        enforce: "pre",
        options: {}
      },
      {
        test: /.htaccess/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '.htaccess',
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images'
            },
          },
        ],
      },
      {
        test: /\.(css)$/,
        use: [
          {
            loader: "file-loader",
            options: {
                name: "[name].[ext]",
            },
           },
           "extract-loader",
           {
             loader: "css-loader",
             options: {
               sourceMap: true,
             }
           },
        ],
      },
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        loader: 'file-loader',
        include: [/fonts/],
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts',
        }
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  },
};