Webpack 5 资产模块出现 woff 文件问题

Question

我们最近从 webpack 4 迁移到 5，我发现了一些可能是错误或我缺乏理解的东西。

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

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

import './other_directory/styles.scss';

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

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

webpack 配置的另外两个相关部分是：

1. Main.js是入口点，但main.html不是，因此我使用 CopyWebpackPlugin 将其复制到dist/目录中

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

2. 由于这是 webpack 5，我使用资源管理器来处理字体，所以我在加载器部分有这个：

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

当我运行 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期望它位于弹出目录内，如果我将字体文件复制到那里，一切都会正常。我的问题是 - 我是否配置错误或遗漏了什么？或者是 webpack 5 中的一个错误？
任何意见都将非常受欢迎。谢谢你！

Answer 1

所以，在搞乱了一段时间之后，我想出了两个解决方案：

1. 一种方法是将 dist/ 文件中的文件结构展平，这样需要字体的文件和字体将位于同一级别，并且一切都会正常工作。

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

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

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