mini-css-extract-plugin 无法解析“资产”

Question

相对于 webpack 根目录，我在

./src/css/font.css

处有一个字体文件：

@font-face {
    font-family: 'poppinsmedium';
    src: url('../fonts/poppins/Poppins-Medium.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

字体文件位于此处

./src/fonts/poppins/Poppins-Medium.otf

这是 webpack 配置中的插件设置：

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css',
    chunkFilename: '[id].[contenthash].css',
  }),
],
rules: [
  {
    test: /\.css$/,
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      'css-loader',
    ],
  }
]

但是当我运行 webpack build 时出现此错误：

ERROR in ./src/css/fonts.css (./src/css/fonts.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./src/css/fonts.css) 5:36-99
Module not found: Error: Can't resolve 'asset' in '/Users/joe/Sources/tidee-life/packages/tidee-life-web'
 @ ./src/css/fonts.css
 @ ./src/app.js 9:0-25

ERROR in ./src/css/fonts.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Cannot find module '../fonts/poppins/Poppins-Medium.otf'
    at tryRunOrWebpackError (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5241:12)
    at __webpack_require__ (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5198:18)
    at /Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5270:20
    at symbolIterator (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3485:9)
    at done (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5176:43
    at symbolIterator (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3463:5)
    at /Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5138:16
    at symbolIterator (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3485:9)
    at done (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3527:9)
    at /Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5052:8
    at /Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:3493:5
    at /Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Cache.js:99:5
    at Hook.eval [as callAsync] (eval at create (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Cache.get (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Cache.js:81:18)
    at ItemCacheFacade.get (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/CacheFacade.js:115:15)
    at Compilation._codeGenerationModule (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:3456:9)
    at codeGen (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5040:11)
    at symbolIterator (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3463:5)
    at /Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5106:15
    at symbolIterator (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3485:9)
    at timesSync (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:2297:7)
    at Object.eachLimit (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/neo-async/async.js:3463:5)
    at /Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/Compilation.js:5070:14
    at processQueue (/Users/joe/Sources/tidee-life/packages/tidee-life-web/node_modules/webpack/lib/util/processAsyncTree.js:61:4)
    at processTicksAndRejections (node:internal/process/task_queues:77:11)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processImmediate (node:internal/timers:447:9)

这在升级到 Webpack 5 之前曾经有效。

Answer 1

似乎在 Webpack 文档的深处（https://webpack.js.org/guides/asset-modules/）：

排除来自资源加载器的新 URL 调用的资源 将依赖项: { not: ['url'] } 添加到加载器配置中。

所以，我将规则调整为：

{
  test: /\.(otf)(\?v=\d+\.\d+\.\d+)?$/,
  dependency: { not: ['url'] },
  use: [
    {
      loader: 'asset',
      options: {
        limit: 10000,
        mimetype: 'font/otf',
      },
    },
  ],
},