代码之家 › 专栏 › 技术社区 › xli

如何使用使用Webpack构建的React组件库分发字体或其他静态资产?

webpack-file-loader webpack reactjs

13

xli · 技术社区 · 7 年前

我正在尝试将一些字体包含在一个组件库中,我将作为一个UMD捆绑包分发,该捆绑包由Webpack生成,并作为NPM模块安装;组件使用这些字体。问题是,指向生成的捆绑包中字体的URL不正确,在运行使用该库的应用程序时会导致404。

resolve-url-loader 将输出的URL "/myfont.woff" . 但当然,该文件在应用程序中的URL处实际上不可用,除非使用它的应用程序进行一些配置以复制该文件并按预期路径提供服务。

是否有办法自动提供这些字体(即。, font-face: 'My Font' 当应用程序从我的库中导入组件时, 最小化使用它的应用程序中所需的配置量 ?

对于大文件,我不想使用 url-loader Base 64对它们进行编码,我不能使用CDN。

2 回复 | 直到 7 年前

1

10

Dmitry Druganov 7 年前

我认为最简单的方法是提供 .css 您的资产正通过相对 url(...)

...
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
},
{
  test: /\.(eot|svg|ttf|woff|woff2|png|jpg)$/,
  use: ['file-loader'],
},
...

在他们的 webpack.config.js 还有你的。css文件导入到他们的代码中,他们将能够通过自动将资产转移到其输出公共目录来使用资产(URL也应该在结果css包中自动调整)。

例如,你可以看看 Onsen UI 库,该库提供通过这些文件嵌入其资产和样式:

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

@font-face {
  font-family: 'Material-Design-Iconic-Font';
  src: url('../fonts/Material-Design-Iconic-Font.woff2') format('woff2'), url('../fonts/Material-Design-Iconic-Font.woff') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

2

hannad rehman 7 年前

你需要一些加载器来完成这项任务。为了解决大文件大小的问题,我使用文件加载器。

      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?name=assests/fonts/[name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?mimetype=application/font-woff&name=assests/fonts/[name].[ext]' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream&name=assests/fonts/[name].[ext]' },
      { test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml&name=assests/fonts/[name].[ext]' },
      { test: /\.(jpe?g|png|gif|ico)$/i, loader: 'file-loader?name=assests/images/[name].[ext]' },

最后使用import语句导入字体的css文件

import from ./assets/fonts/abc.css

但是要确保你已经安装了网页包css加载程序