mini-css-extract-plugin或css-loader致@font-face字体路径缺失斜杠问题

不确定具体原因，但根据经验发现，mini-css-extract-plugin 似乎会破坏 CSS @font-face 中定义的字体路径。

原始 CSS 代码：

@font-face {
  font-family: 'Waiting-for-the-Sunrise';
  font-style: normal;
  font-weight: 400;
  src: url('waiting-for-the-sunrise-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('waiting-for-the-sunrise-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('waiting-for-the-sunrise-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('waiting-for-the-sunrise-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('waiting-for-the-sunrise-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('waiting-for-the-sunrise-v16-latin-regular.svg#WaitingfortheSunrise') format('svg'); /* Legacy iOS */
}

实验中浏览器尝试通过以下错误路径查找字体（来自控制台报错）：

http://localhost:9000/fontswaiting-for-the-sunrise-v16-latin-regular.47278f9491df1166dc0d.woff2

问题在于fonts文件夹名称后缺失斜杠。

我在 assetModule 中添加如下字体文件保存路径配置后，问题暂时得到解决：

{
  test: /\.(woff2?|eot|ttf|otf|svg)$/i,
  include: [
    path.join(__dirname, 'src', 'fonts')
  ],
  generator: {
    filename: path.join('fonts[name].[hash][ext]')
  },
  type: 'asset/resource',
}

但我认为这并非正确的解决方式，猜测路径损坏是由 mini-css-extract-plugin 导致的，也有可能是 css-loader 的问题。最终生成的 CSS 代码如下：

/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/fonts/fonts.css ***!
  \***********************************************************************/
/* waiting-for-the-sunrise-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Waiting-for-the-Sunrise';
  font-style: normal;
  font-weight: 400;
  src: url(fontswaiting-for-the-sunrise-v16-latin-regular.3ad9d32bdd08f024e2ce.eot); /* IE9 Compat Modes */
  src: url(fontswaiting-for-the-sunrise-v16-latin-regular.3ad9d32bdd08f024e2ce.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
       url(fontswaiting-for-the-sunrise-v16-latin-regular.47278f9491df1166dc0d.woff2) format('woff2'), /* Super Modern Browsers */
       url(fontswaiting-for-the-sunrise-v16-latin-regular.7a974ce46409250b31e3.woff) format('woff'), /* Modern Browsers */
       url(fontswaiting-for-the-sunrise-v16-latin-regular.8b5a4b6939495fe862ee.ttf) format('truetype'), /* Safari, Android, iOS */
       url(fontswaiting-for-the-sunrise-v16-latin-regular.a7f1c3b3b712d68f152a.svg#WaitingfortheSunrise) format('svg'); /* Legacy iOS */
}

内容的提问来源于stack exchange，提问作者Evgeniy