如何从 webpack 生成的 NPM 包中正确加载资产？

Posted 2023-02-22

【中文标题】如何从 webpack 生成的 NPM 包中正确加载资产？

【英文标题】：How to load assets correctly from webpack-generated NPM package?

【发布时间】：2016-09-07 09:27:00

【问题描述】：

我正在使用 webpack 为 npm 包生成适当的文件，该包将托管一些反应组件。它们附加了一些 CSS，其中引用了一些字体和图标。

当使用 file 加载器时，这些资产在主应用程序中使用它们的绝对路径（即 fonts/my-font.woff）被错误引用，而这些资源缺失。

有没有办法解决这个问题并让我的主应用程序查找正确的文件？我宁愿修复包本身，也不愿复制 someone has mentioned 之类的资产，因为我可能无法完全控制主应用程序。

【参考方案1】：

好吧，我首先要说的是，在组件中包含字体通常是个坏主意，因为主应用程序可能有自己的风格/品牌/等，你会与之抗争。

也就是说，如果字体类似于图标，您可以对它们进行 base64 编码并将其内联到 CSS 中。有几个 Webpack 编码器插件可以做到这一点。

您还提到了图标，我会尝试将它们转换为 SVG 并在代码中提供它们。您还可以将 PNG 进行 base64 编码到您的 CSS 作为后备。

这种方法的好处：

消除父应用程序中的 HTTP 请求 更新包时，父应用始终具有最新（非缓存）图标/字体 您不必担心路径、打包外部文件等

我能想到的缺点：

您正在显着增加脚本大小 您会失去一些缓存优势 如果您不是图标/字体的版权所有者，这可能违反 TOS