【问题标题】：How to load assets correctly from webpack-generated NPM package?如何从 webpack 生成的 NPM 包中正确加载资产？
【发布时间】：2016-09-07 09:27:00
【问题描述】：
我正在使用 webpack 为 npm 包生成适当的文件，该包将托管一些反应组件。它们附加了一些 CSS，其中引用了一些字体和图标。
当使用 file 加载器时，这些资产在主应用程序中使用它们的绝对路径（即 fonts/my-font.woff）被错误引用，而这些资源缺失。
有没有办法解决这个问题并让我的主应用程序查找正确的文件？我宁愿修复包本身，也不愿复制 someone has mentioned 之类的资产，因为我可能无法完全控制主应用程序。
【问题讨论】：
标签：
css
reactjs
npm
webpack
webpack-file-loader
【解决方案1】：
好吧，我首先要说的是，在组件中包含字体通常是个坏主意，因为主应用程序可能有自己的风格/品牌/等，你会与之抗争。
也就是说，如果字体类似于图标，您可以对它们进行 base64 编码并将其内联到 CSS 中。有几个 Webpack 编码器插件可以做到这一点。
您还提到了图标，我会尝试将它们转换为 SVG 并在代码中提供它们。您还可以将 PNG 进行 base64 编码到您的 CSS 作为后备。
这种方法的好处：
- 消除父应用程序中的 HTTP 请求
- 更新包时，父应用始终具有最新（非缓存）图标/字体
- 您不必担心路径、打包外部文件等
我能想到的缺点：
- 您正在显着增加脚本大小
- 您会失去一些缓存优势
- 如果您不是图标/字体的版权所有者，这可能违反 TOS