Webpack mini-css-extract-plugin @font-face url解析问题

Question

我在理解 URL/路径的性质以及使用 和配置其选项（例如 和 属性）时如何解析它们mini-css-extract-plugin时file-loader遇到context困难filename。

我正在为 WordPress 开发一个自定义主题，自定义主题的文件夹是我初始化 npm project/package.json 文件和 webpack.config.js 文件的位置。我正在使用浏览器同步插件将本地 WordPress 服务器代理到浏览器同步服务器。

文件加载器将文件发送到 dist>assets>fonts 文件夹中。但编译后的 CSS 文件中生成的 URL 未正确解析。

输出CSS，浏览器控制台错误

GET http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.ttf net::ERR_ABORTED 404 (Not Found)

GET http://localhost:4444/wp-content/themes/test/dist/css/assets/fonts/my-font.woff 404 (Not Found)

在上面的错误中，网址显示dist/css/assets/fonts/my-font.woff，这不是我所期望的。这是预期的，dist/assets/fonts/my-font.woff因为这是文件加载器在 dist 文件夹中发出文件的地方。（如文件加载器上下文选项中定义）

我不明白为什么它将css目录添加到字体 url 中。唯一提及的dist/css路径是在 MiniCSSExtractPlugin 选项的 filename 属性中。因为那是我想要输出 css 文件的地方。

css这可以通过删除文件名属性上的路径前缀来确认。然后，该 url 会相对于 dist 路径正确解析，但编译后的 css 文件会放置在 dist 文件夹的根目录中，而不是其自己的dist/css子目录中。

mini css 提取插件选项

new MiniCSSExtractPlugin({
            filename: 'css/[name].css',
        }),

scss 文件中的字体规则

@font-face {
  font-family: 'my-font';
  src: url("../assets/fonts/my-font.eot");
  src: url("../assets/fonts/my-font.eot") format("embedded-opentype"),
  url("../assets/fonts/my-font.ttf") format("truetype"),
  url("../assets/fonts/my-font.woff") format("woff"),
  url("../assets/fonts/my-font.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

webpack 配置入口和输出

 entry: {
        'frontend': './src/js/frontend.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "js/[name].js"
    },

模块.规则

module: {
        rules: [
            {...},
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCSSExtractPlugin.loader
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader"
                    },
                ]
            },
            {
                test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            context: path.resolve(__dirname, 'src'),
                            name: '[path][name].[ext]'
                        }
                    }
                ]
            }

插件

plugins: [
        new CleanWebpackPlugin(),
        new BrowserSyncWebpackPlugin({...}),
        new MiniCSSExtractPlugin({
            filename: 'css/[name].css',
        }),
    ]

我是 webpack 的初学者，在尝试正确解析字体 URL 时遇到了一些困难。我有一种感觉，我不明白 webpack 配置中相对/绝对路径、上下文和公共路径的用途。编译后的 CSS 中的 URL 是如何确定的？

Answer 1

改变

url("../assets/fonts/my-font.ttf") format("truetype"),

到

url("../assets/fonts/my-font.ttf") format("ttf"),