Webpack 5 asset modules issue with woff file

Question

We have recently migrated from webpack 4 to 5 and I discovered something that might be a bug or my lack of understanding.

Basically, my project has several pages that I define as entry points in webpack.config.js. One of those entry points is called main.js and is located in a directory called "popup" that has two files - main.html and main.js.

Main.html is quite simple, it's just a bit of html and a link to the main.js. Main.js imports a scss file from another directory, let 's call it styles.scss,

import './other_directory/styles.scss';

and styles.css loads font information from yet another place, like so:

@font-face {
    font - family: 'fontello';
    src: url('./assets/fontello.woff2') format('woff2');
    ...
}

Another two relevant part of the webpack config are:

1. Main.js is an entry point, but main.html is not, so I am copying it into dist/ directory using CopyWebpackPlugin

new CopyWebpackPlugin({
            patterns: [{
                    from: 'src/popup/',
                    to: 'popup/'
                },

2. Since this is webpack 5, I use asset manager to handle fonts, so I have this in loader section:

                module: {
                    rules: [{
                            test: /\.s(a|c)ss$/,
                            use: [{
                                loader: 'style-loader'
                            }, {
                                loader: 'css-loader'
                            }, {
                                loader: 'sass-loader'
                            }],
                        },
                        ...
                        {
                            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                            type: 'asset',
                        }
                    ]}

When I run npm it process everything successfully and I see this tree structure in my dist/ directory:

dist/
  ...
  32oiy493y481973.woff  > my font file processed by webpack 5 asset module manager
  popup/
      main.js
      main.html
  ...

When I open my main.html in a browser, I don't see any icons supplied by my woff file. I dug around and it turns out that my auto-generated woff file resides at the top level of my dist, but main.js expects it to be inside the popup directory, if I copy my font file there everything works fine. My question is - am I configuring it incorrectly or missing something? Or is it a bug in webpack 5?
Any input would be very welcome. Thank you!

Oglethorpe

Answer 1

So, after messing with it for some time, I came up with two solutions:

1. One would be to flatten my file structure in the dist/ file, this way the files requiring the font and the font would be on the same level and things would just work.

2. This is the approach I took since I wanted to keep the file structure - I changed my font asset handler to be

                        {
                            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                            type: 'asset/inline',
                        }

Inline command forces it to inject the font data into the bundle instead of emitting a separate file, so this worked for me.

Oglethorpe

Answer 2

my solution to keep the file structure is to use the PATH

        {
            test: /\.(woff(2)?|eot|ttf|otf|svg)(\?v=\d+\.\d+\.\d+)?$/,
            type: 'asset/resource',
            generator: {
                filename: '[path]/[name][ext]',
            },
        },

Lashoh