javascript - Webpack 5 Assets 模块与 woff 文件有关

Question

我们最近从 webpack 4 迁移到 5，我发现了一些可能是错误或我缺乏理解的东西。
基本上，我的元素有几个页面，我在 中定义为入口点。 webpack.config.js .这些入口点之一称为 main.js 并位于一个名为“popup”的目录中，该目录有两个文件 - main.html 和 main.js .
Main.html 很简单，只是一点 html 和 的链接main.js .
Main.js 从另一个目录导入一个scss文件，我们称之为样式.scss ,import './other_directory/styles.scss';和 样式.css 从另一个地方加载字体信息，如下所示:

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

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

Main.js 是一个入口点，但 main.html 不是，所以我将其复制到 分布/使用 CopyWebpackPlugin

的目录

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

由于这是 webpack 5，我使用 Assets 管理器来处理字体，所以我在加载器部分有这个:

                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/
  ...
  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

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

一种是在 dist/文件中展平我的文件结构，这样需要字体和字体的文件将处于同一级别，并且一切正常。

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

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

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