Javascript 带有woff文件的Webpack 5资产模块问题

我们最近从Webpack4迁移到了Webpack5，我发现了一些可能是错误或者我缺乏理解的东西

基本上，我的项目有几个页面，我在webpack.config.js中将它们定义为入口点。其中一个入口点称为main.js，位于名为“popup”的目录中，该目录有两个文件-main.html和main.js

Main.html非常简单，它只是一点html和指向Main.js的链接。 Main.js从另一个目录导入一个scss文件，我们称之为style.scss

import./other_目录/styles.scss'

css从另一个地方加载字体信息，如下所示：

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

网页包配置的另外两个相关部分是：

Main.js是一个入口点，但是Main.html不是，所以我使用CopyWebpackPlugin将它复制到dist/目录中
因为这是webpack 5，所以我使用asset manager处理字体，所以在loader部分中有以下内容：
当我运行npm时，它成功地处理了所有事情，我在我的dist/目录中看到了这个树结构：

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

在浏览器中打开我的main.html时，我看不到woff文件提供的任何图标。我四处翻找，发现我的自动生成的woff文件位于我的dist的顶层，但是main.js希望它位于弹出目录中，如果我在那里复制字体文件，一切正常。我的问题是-我是否配置不正确或缺少什么？还是网页5中的错误？

欢迎任何意见。
谢谢大家!
 因此，在处理了一段时间后，我想出了两个解决方案：

一种是在dist/file中展平我的文件结构，这样需要字体的文件和需要字体的文件就在同一个级别上，事情就可以正常工作了


这是我采取的方法，因为我想保留文件结构-我将字体资产处理程序更改为


内联命令强制它将字体数据注入到包中，而不是发出单独的文件，所以这对我来说很有效

                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',
                        }
                    ]}

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

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