使用 webpack 在 monaco-editor 包中构建字体文件答案

【问题标题】：Build font file within monaco-editor package with webpack使用 webpack 在 monaco-editor 包中构建字体文件
【发布时间】：2021-06-25 18:12:22
【问题描述】：

我正在尝试将一个依赖于monaco-editor 模块的包集成到我们的项目中。

我们项目的一些细节：

从create-react-app 项目中退出
语言：打字稿 (v3.9)
构建系统：Webpack (v4.44)
摩纳哥编辑器 (v0.22.3)

我们项目的依赖如下所示：

Project A
   |--> EditorPackage
            |--> MonacoEditor (v0.22.3)

我们还依靠 Monaco 编辑器 webpack plugin 在我们的项目中注册特定语言并正确配置网络工作者。当我尝试使用 webpack 构建我们的项目时，我突然开始看到这个错误：

.ttf 是封装在 monaco-editor 源中的字体文件，我为此找到了相关的issue。我按照docs 中的指导，通过修改我们的 webpack 配置添加了正确打包.ttf 文件的规则：

{
  test: /\.ttf$/,
  loader: require.resolve("file-loader")
}

我还尝试将 .ttf 添加到 webpack 的 extensions 配置中。我似乎仍然遇到同样的错误。我认为这可能是由于我们通过上面强调的EditorPackage 间接依赖 MonacoEditor。

关于如何在此处正确解析和解析.ttf 文件的任何想法？

【问题讨论】：

标签： node.js typescript webpack webpack-4 monaco-editor

【解决方案1】：

我看到的错误是从file-loader 插件发出的。随着 webpack 4 的升级，在此 issue 的 Incompatible Loaders 部分中突出显示了加载程序的一些重大更改。

根据该问题的讨论，该问题有两种解决方案：

解决方法 - 在 webpack 配置中的 file-loader 插件中添加 context 选项：

const fileLoader = {
  loader: require.resolve("file-loader"),
  //... other config
  options: {
    context: process.cwd() // this fixes the error
  }
};

将 file-loader 升级到 v 1.1.6 或更高版本。参考：changelog，文件加载器issue

希望对遇到类似问题的其他人有所帮助。

【讨论】：