css-从 3.6 到 4 的加载程序中断了加载字体的先前路径

Question

首先，我只想在深入探讨之前提供一些相关内容的链接。

破坏构建。 https://github.com/MorphicPro/morphic.pro/runs/969426390?check_suite_focus=true 此版本中唯一发生变化的是 css-loader 从 3.6.0 升级到 4.2.1 在这里提交：https://github.com/MorphicPro/morphic.pro/commit/eecf41d671f1b9357f872bfac0e378f6b81260ac

来自阅读https://github.com/webpack-contrib/css-loader/releases/tag/v4.0.0 看起来 css-loader 在本地解析路径的方式发生了变化。 IE: 改进 url() 解析算法 (bc19ddd) https://github.com/webpack-contrib/css-loader/commit/bc19ddd8779dafbc2a420870a3cb841041ce9c7c

在 3.6 中的 4 之前，我通过 url() 成功解析了我的路径 https://github.com/MorphicPro/morphic.pro/blob/master/assets/css/app.css#L12

我还使用文件加载器通过 https://github.com/MorphicPro/morphic.pro/blob/master/assets/webpack.dev.config.js#L76-L83

将字体移动到正确的路径

升级 css-load 到 4 之后，这看起来现在被错误破坏了：

ERROR in ./css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/fonts/icomoon.woff' in '/Users/joshchernoff/Dev/morphic.pro/assets/css'

从错误来看，它似乎正在尝试解析 css 文件夹中的字体路径。我试过将 src: url("/fonts/icomoon.woff"); 的字体路径更新为 src: url("../fonts/icomoon.woff"); 但没有成功。从 3 升级到 4 时我应该注意哪些变化？

Answer 1

这可能不是你的情况，但我想通了......上面的例外似乎是有效的，我做了 2 个假设并继续前进，见下文：

1:.版本 3.x 忽略并隐藏了与 url() 相关的异常，未找到给定相对路径的图像，这使得 webpack 继续构建 4.x 只是不那么宽容。

2:.以某种方式 4.x 映射了 unused/additional 试图使用 url() 加载图像的文件，并且因为它们是已弃用的文件，这些图像的相对路径不再正确。

我做出上述假设的原因是因为我映射了所有在你的问题中抛出异常的文件，并注意到带有 url() 的文件试图加载一些不再存在的图像并且类没有在我的代码中使用并且 3 岁...

所以我只是删除了已弃用的 files/classes，它按预期构建了所有内容。

Answer 2

我找到了适合我的解决方案。

我刚刚为 css-loader 禁用了 URL 解析器并克服了我的异常，一切看起来仍在正确加载 ‍♂️

https://webpack.js.org/loaders/css-loader/#url

css-从 3.6 到 4 的加载程序中断了加载字体的先前路径

css-loader from 3.6 to 4 broke loading prior path to fonts

webpack

css-loader