title: Webpack 5 asset modules issue with woff file
body: <p>We have recently migrated from webpack 4 to 5 and I discovered something that might be a bug or my lack of understanding.</p>
  <p>Basically, my project has several pages that I define as entry points in <strong>webpack.config.js</strong>. One of those entry points is called <strong>main.js</strong> and is located in a directory called &quot;popup&quot; that has two files - <strong>main.html</strong> and <strong>main.js</strong>.</p>
  <p><strong>Main.html</strong> is quite simple, it's just a bit of html and a link to the <strong>main.js</strong>.
  <strong>Main.js</strong> imports a scss file from another directory,  let 's call it <strong>styles.scss</strong>,</p>
  <p><code>import './other_directory/styles.scss';</code></p>
  <p>and <strong>styles.css</strong> loads font information from yet another place, like so:</p>
  <pre><code>@font-face {
      font - family: 'fontello';
      src: url('./assets/fontello.woff2') format('woff2');
      ...
  }
  </code></pre>
  <p>Another two relevant part of the webpack config are:</p>
  <ol>
  <li><strong>Main.js</strong> is an entry point, but <strong>main.html</strong> is not, so I am copying it into <strong>dist/</strong> directory using CopyWebpackPlugin</li>
  </ol>
  <pre><code>new CopyWebpackPlugin({
              patterns: [{
                      from: 'src/popup/',
                      to: 'popup/'
                  },
  </code></pre>
  <ol start="2">
  <li>Since this is webpack 5, I use asset manager to handle fonts,  so I have this in loader section:</li>
  </ol>
  <pre><code>                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',
                          }
                      ]}
  </code></pre>
  <p>When I run npm it process everything successfully and I see this tree structure in my <strong>dist/</strong> directory:</p>
  <pre><code>dist/
    ...
    32oiy493y481973.woff  &gt; my font file processed by webpack 5 asset module manager
    popup/
        main.js
        main.html
    ...
  </code></pre>
  <p>When I open my <strong>main.html</strong> 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 <strong>main.js</strong> 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?<br />
  Any input would be very welcome.
  Thank you!</p>