css-loader从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

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

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

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

Answer 2

这可能不是你的案子但我想通了。上面的例外似乎是有效的，我做了两个假设，然后继续，如下所示：

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

2：。不知怎么的，4.x映射了未使用的/附加的文件，这些文件试图用url()加载图像，因为它们是不推荐使用的文件，所以这些图像的相对路径不再正确。

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

因此，我只是删除了被弃用的文件/类，它就像预期的那样构建了一切。