title: Webpack 5 issues with fonts getting Failed to decode & OTS parsing error
body: <p>Please could someone shed some light into the issues I'm having with Webpack. I've not used Webpack for fonts before and have run into a bit of a headache I've not been able to solve. I'm pulling the fonts from a .css file using url().</p>
  <p>What I'm getting after Webpack has done its thing is 3 .woff files with their names changed to a hash like name. I then have a fonts folder with the 3 fonts in named correctly. Looking at the main.css (the one Webpack produced) the url() is now looking at the font files with the hash names. When I open the hash named .woff files its an export command pointing to the fonts folder and to the correct font.... Is this how it meant to work?</p>
  <p>When I load up the webpack in the console I have errors for each file:
  Failed to decode downloaded font: http://localhost/OPM/wpcontent/themes/theme/assets/build/b4f8bd69b3d37cc51e2b.woff
  OTS parsing error: invalid sfntVersion: 1702391919</p>
  <p>This is wants in the .woff file
  <code>export default __webpack_public_path__ + &quot;fonts/font-icons.woff&quot;;</code></p>
  <pre><code>const path = require('path');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 
  const cssnano = require( 'cssnano');
  const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin');
  
  const JS_DIR = path.resolve(__dirname, 'src/js');
  const IMG_DIR = path.resolve(__dirname, 'src/img');
  const BUILD_DIR = path.resolve(__dirname, 'build');
  
  const entry ={
      main: JS_DIR + '/main.js',
  }
  
  const output = {
      path: BUILD_DIR,
      filename: 'js/[name].js'
  };
  
  const rules = [
      {
          test: /\.js$/,
          include: [JS_DIR],
          exclude: /node_modules/,
          use: 'babel-loader'
      },
      {
          test: /\.css$/,
          exclude: /node_modules/,
          use: [
              {
              loader: MiniCssExtractPlugin.loader,
              options: {
  
          
                },
              },
              'css-loader',
          ],
      },
      /*{
          test: /\.(png|jpg\svg\jpeg\gif\ico)$/,
          use: [
              {
                  loader:'file-loader',
                  options:{
                      name: '[path][name].[ext]',
                      publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../',
                  }
              }]
      },*/
      {
          test: /\.(woff|woff2)$/,
          use: {
            loader: 'file-loader',
            options:{
              name: '[name].[ext]',
              //publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../',
              outputPath: './fonts/',
            }
          },
        },
     
  ];
  
  const plugins = ( argv ) =&gt; [
      new CleanWebpackPlugin({
          cleanStaleWebpackAssets: ( 'production' === argv.mode )
      }),
  
      new MiniCssExtractPlugin({
          filename: 'css/[name].css'
      })
  ];
  
  module.exports = (env, argv) =&gt; ({
      entry: entry,
      output: output,
      devtool: 'source-map',
      module:{
          rules: rules,
      },
      optimization:{
          minimizer:[
              /*new OptimizeCssAssetsPlugin({
                  cssProcessor: cssnano,
              }),*/
              new UglifyJsPlugin({
                  cache: false,
                  parallel: true,
                  sourceMap: false,
              })
          ]
      },
      plugins: plugins( argv ),
      externals: {
          jquery: 'jQuery'
      }
  });
  </code></pre>