Webpack内联字体与url-loader

Question

我正在尝试使用base64编码的Data URI行内一些字体，但是在Webpack的url-loader中遇到了麻烦。这很奇怪，因为url-loader似乎已经为我的图像和svg文件做到了这一点。我的设置如下：

目录结构：

root/
|-src/
|--assets/
|
|----fonts/
|      icon-fonts/
|        fontawesome.woff2
|
|----styles/
|      fonts.css
|
|--components/
|   main.component.js
|...

webpack.config.js

module: {
  loaders: [
    {
      test: /\.(jpg|png|svg|woff2)$/,
      exclude: /node_modules/,
      loader: 'url?limit=100000&name=[name]-[sha512:hash:base64:7].[ext]'
    },
  ]
}

fonts.css

@font-face {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/icon-fonts/fontawesome.woff2') format('woff2');
}

main.component.js

import fonts from '../assets/styles/fonts.css'
import React from 'react'

export class App extends React.Component {
  ...
}

输出

- Tyler Reitz

Answer 1

我不确定url-loader能否内联字体，但我的猜测是不能。您可以使用base64-inline-loader来实现这个目的。

注意：

例子演示并没有成功，因为它仍然导出文件。

{
   test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
   use: 'base64-inline-loader?limit=1000&name=[name].[ext]'
}

然而，一旦我从规则中移除了名称，它就像魔术般地运行。

{
  test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
  use: 'base64-inline-loader'
}

- Eduard Jacko

---

注意，使用最新版本的webpack和css-loader，我们需要在规则中包含适当的资源类型，例如：{test: /\.(css|woff(2)?)(\?[a-z0-9=&.]+)?$/,use: ['base64-inline-loader'], type: 'javascript/auto'}。有关更多详细信息，请参见此处： webpack.js.org/guides/asset-modules/#general-asset-type。 - cjones26