小编noo*_*son的帖子

我在理解 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: …