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 進行查看。