title: Webpack 5 Assets Module: How to keep the folder structure in the output folder?
body: <p>I try to configure Webpack 5 such it keeps the assets folder structure for my images and fonts.</p>
  <p>I have the following structure:</p>
  <pre><code>- /app
      /assets
          /images
              /topic1
              /topic2
          /fonts
  </code></pre>
  <p>In my webpack config I have configured the Assets module like that:</p>
  <pre><code>{
      test: /\.(png|svg|jpg|jpeg|gif|xml)$/i,
      type: 'asset/resource'
  }
  ...
  same for Font files...
  </code></pre>
  <p>If I run the Webpack 5 build it copies the assets by default to my <code>dist/</code> folder in a flat structure, e.g. images below the folder <code>/topic1</code> are directly copied to <code>dist/my-topic1-img.png</code> but actually I would like to have it here: <code>dist/assets/images/topic1/my-topic1-img.png</code>.</p>
  <p>How can I easily achieve this?</p>
  <p>I have seen this doc link here: <a href="https://webpack.js.org/configuration/module/#rulegeneratorfilename" rel="nofollow noreferrer">https://webpack.js.org/configuration/module/#rulegeneratorfilename</a>. So I assume a solution could be to write some custom <code>filename</code> function which would set dynamically depending on the file path a new filename including the path elements for each asset.</p>
  <p>Does Webpack 5 support such a config out-of-the-box or do I really need to write some custom function for this?</p>
  <p>Thanks for help and inputs.</p>