Webpack 5: file-loader generates a copy of fonts with hash-name

Question

I had the exact same issue as the OP (@toge) having migrated from Webpack 4 to 5. Whilst I was looking to implement the solution posted by @seanbun, I came across the following setup for the new Webpack 5 asset modules config that allowed me to get both my previous file-loader svgs and font files to generate correctly without duplication in the root output folder:

{
    test: /\.(woff(2)?|ttf|eot)$/,
    type: 'asset/resource',
    generator: {
        filename: './fonts/[name][ext]',
    },
},

This tells webpack to handle it via the asset modules config but output to a custom filepath, similar to how the file-loader config used to work.

This setup also removed my need to downgrade css-loader too which was an added benefit

Leave a Comment Cancel reply