webpack 使用 iconfont

1. 进入网站

进入网站 Iconfont-阿里巴巴矢量图标库。

2. 如何使用

打开下载好的压缩包，可以看到里面长这个样子：

将 iconfont.eot、iconfont.svg、iconfont.ttf 和 iconfont.woff 字体文件复制放到 src/fonts 目录下。

将 iconfont.css 文件复制放到 src/css 目录下，并根据实际情况修改 css 文件中引用字体文件的路径，例如修改为：

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1571922600454'); /* IE9 */
  src: url('../fonts/iconfont.eot?t=1571922600454#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQYAAsAAAAACGQAAAPJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDDAqENINlATYCJAMQCwoABCAFhG0HQxtCBxEVnEnJfhymW4x803zxxnK7xU7x3xmYU0+W0rp2GSDJCCjtOCkQe4T8InhtP2qAgLD5i3OeQF6YqMuRnD159G2X0jjL6I97p78lPp9lucwxzqMuS6MJFNDYCyTgEsaW4dUuhYPeDASAAHu+SGp6rhw8GEgvAoAsnDdnGviMEqwhk4AHgVbFRAZSDRl4bjd3B0BV8HvyDcHxAAcZBRlYODttJhI/S5/3UtV/lYkeAtZ0egDyNIAC8AUwgIytNBaDRkFfFIIZZHCHbbUiwOe9///zWfKYm/3LAwg4UIBogQh1MS40RIHPEqcAAT7v0YPDFbKwCA+HYd15ANoADgF4Dzjbz+XAgZpZi66R+vobnj5VqJ7Ih9Xez56R58/HaJ7GnX+epL4R6VqvNnc/dUt48kSueqpo0Fg8f06ePdvQdLTDdGa9erTUYkaTpBkB1/0kVf/aM2dZ3/MMvez1qmFTXfUwmGpENNBIZI2iwWxci6W8+YwgqM9ZOwuO0fOUrTYTmizGNA20NJvK5XpHL9rKRWXn5Qg9ZXZja9vQTF11vZmiQRQ1zYWNepnBXpfFjVyVRHbOOfXhxJbS2FKXFjacQ3ZWSRs533THsjJ+wDn7LDv7JvMme7ss+8lk8XYsLpHu7FmzynQV0EBfgsX5g8Kue8er9s6VK7usna13nVqrZ2RjpD+VJCUZJhqCgiRGcoV+SdoDhflP80S+PC4+ynboz+7OLTMzOx+7ze6XXb3vpvhNvvUQsy3W7LxZWflCWdtyHY+sHVpzNNFm/R/e8ICjdlIgszkeMOTTC3w92jg8z6DJUaZkZud5nV86ln4cm/3QUTbbQFmi+CFKLAUA/P9NJSoG3b/SFmoFAPQG9+J3d0KjwanXUwxif/PiY5e8fH55GJz/vzJ0D/HgAJn1c1kdc5jFISrGDC5n2mYG+avycwAE6gH+g1iNvZtCbNY5HSDgYZYAB23YAQUPVxTD+YIMIkJBCzwSQICPjOkiTCwHBWE6ALxtR0BgaD9w0Md5oDB0F8Vwb0EGcz9AC4aMKJz8uyx4dm3e6UYoGDOQMzhVV5pp+BRmvtH0haA0J8D/kTrngTiI8pEXVkhTDOkGkzBr0FSX8ETbYVHU0FDtUXFgmZs0DHXVmwJVl4uTG4IEhjJAmgFHqVW0V5ydCt9/Q0avIFBDVpP6D5GOqx/EAlEH1EtYdcq6lWs6AyPBmAY0UiuBJ9KjggZroKlu5yGFBewAfyMVQj7dVRgsLy7fcA2AgJzA4ggljMiwnZtctZNOVN4d7rPvqMxiAQAAAA==') format('woff2'),
  url('../fonts/iconfont.woff?t=1571922600454') format('woff'),
  url('../fonts/iconfont.ttf?t=1571922600454') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../fonts/iconfont.svg?t=1571922600454#iconfont') format('svg'); /* iOS 4.1- */
}

接下来写入下面的代码：

<!-- index.html -->
<div id="root">
  <span class="iconfont iconbianji" />
</div>

// index.js
import './css/iconfont.css'

// webpack.config.js
rules: [
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  }
]

执行打包命令，可以看到终端的报错，这是因为 webpack 不知道如何解析 iconfont.css 文件中引入的字体文件，这里我们可以使用 file-loader 将它们复制到指定的文件：

// webpack.config.js
rules: [
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  }，
  {
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    use: {
      loader: 'file-loader',
      options: {
        outputPath: 'fonts/'
      }
    }
  }
]

再次打包，可以看到 dist 目录下就生成了包含字体文件的 fonts 文件夹。打开浏览器预览 index.html 即可看到页面上展示出了一个图标。

更多使用方式，可以打开下载的压缩包里面 demo_index.html 进行查看。