创建React Outlook加载项时Webpack出现Node模块解析错误

问题原因 #

Webpack 5默认不再自动处理woff/woff2等字体类二进制文件，而@fluentui/react-icons依赖了这类字体资源，导致编译时因缺少对应处理规则而报错。

解决方案 #

方式一：使用Webpack 5内置Asset模块（推荐，无需额外安装依赖） #

修改项目根目录下的webpack.config.js，在module.rules中添加字体文件处理规则：

module.exports = {
  // 保留原有配置...
  module: {
    rules: [
      // 原有js、css等处理规则...
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        // 可选：指定字体文件输出路径，不设置则默认打包到输出目录根目录
        generator: {
          filename: 'fonts/[name][ext][query]'
        }
      }
    ]
  }
};

方式二：使用file-loader #

1. 安装依赖：

npm install file-loader --save-dev

2. 修改webpack.config.js添加规则：

module.exports = {
  // 保留原有配置...
  module: {
    rules: [
      // 原有js、css等处理规则...
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/' // 可选：指定输出目录
            }
          }
        ]
      }
    ]
  }
};

验证修复 #

修改配置后，停止当前运行的Webpack服务，重新执行启动命令：

npm start

此时Webpack应能正常处理字体文件，编译通过。

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