升级Webpack5后mini-css-extract-plugin解析asset及字体文件失败

为啥会出问题？ #

Webpack5把Webpack4里常用的file-loader/url-loader给整合了，换成了内置的asset模块系统，同时资源路径的解析规则也变了，你那套Webpack4的配置自然就不兼容了，才会出现这俩错误。

一步步修复 #

1. 搞定“无法解析asset模块”的错误 #

不用再装file-loader/url-loader了，直接在Webpack配置里给字体文件加个asset模块的规则就行：

module.exports = {
  module: {
    rules: [
      // 保留你原来的CSS处理配置
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      // 新增字体文件的处理规则
      {
        test: /\.(otf|ttf|woff|woff2)$/i,
        type: 'asset/resource', // 相当于Webpack4的file-loader
        generator: {
          // 指定字体输出的路径，避免乱输出找不到
          filename: 'fonts/[name][ext][query]'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css' // 确保CSS输出路径正确，避免路径关联出错
    })
  ]
};

要是你想把小体积字体转成base64内嵌，可以把asset/resource换成asset/inline（对应Webpack4里url-loader的limit配置），或者用asset让Webpack自动判断要不要转。

2. 修复“找不到字体文件”的问题 #

先核对你的文件结构：

├── src/
│   ├── css/
│   │   └── font.css
│   └── fonts/
│       └── poppins/
│           └── Poppins-Medium.otf

那font.css里引用字体的路径得写成相对于当前CSS文件的路径，不能瞎写：

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

css-loader会自动把这个相对路径转成Webpack输出目录对应的绝对路径，所以路径一定要对应上。

3. 清理没用的依赖（可选） #

之前装的file-loader/url-loader现在没用了，可以卸载掉：

npm uninstall file-loader url-loader

验证 #

重新跑构建命令，看看俩错误是不是都没了，字体文件正常输出到指定目录，页面也能加载字体就ok了。

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