0

Recently I've upgraded my Webpack 4 project to version 5 and stumbled on an issue with file-loader. For some reason fonts are generated in root directory instead of /fonts.

 {
   test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
   use: info => {
     const theme = path.basename(info.issuer, path.extname(info.issuer));
     return [{
       loader: 'file-loader',
       options: {
         name: '[name]_[hash].[ext]',
         outputPath: url => path.join('root/link/to/theme', theme, 'dist/fonts', url),
         publicPath: '../fonts'
       }
     }];
   }
 },

I've found one almost an answer Webpack 5: file-loader generates a copy of fonts with hash-name. However, problem is -- I need to generate multiple outputPaths and not only one, In which case the generator approach doesn't seem to be the right solution.

Any thoughts? Big thanks for help.

packages:

"webpack": "5.52.1",
"webpack-cli": "^4.10.0",
Little_bugfixer
  • 40
  • 5

1 Answers1

0

After some time of researching and trying different ways of defining paths I updated webpack to 5.74.0 and tried to simply move the output path function to the generator. At least I didn't know that it is an option.

{
  test: /\.(ttf|eot|woff|woff2)$/,
  type: "asset",
  parser: {
    dataUrlCondition: {
      maxSize: 50000
    }
  },
 generator: {
   filename: '[name]_[hash][ext][query]',
   outputPath: info => {
     const theme = path.basename(info.issuer, path.extname(info.issuer))
     return path.join('.root/link/to/theme', theme, '/dist/fonts', info)
   },
   publicPath: '../fonts'
 }
}
Little_bugfixer
  • 40
  • 5