웹팩은 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.js
import './css/iconfont.css'

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

패키지 명령을 실행하면 터미널의 오류를 볼 수 있습니다. 웹 패키지가 iconfont를 어떻게 해석하는지 모르기 때문입니다.css 파일에 포함된 글꼴 파일입니다. 파일-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/'
      }
    }
  }
]

다시 포장하면 디스플레이 디렉터리에 글꼴 파일을 포함하는 fonts 폴더가 생성된 것을 볼 수 있습니다.브라우저 미리 보기 index를 엽니다.html에서 페이지에 아이콘을 보여 줍니다.
더 많은 사용 방식, 다운로드한 압축 가방에서 데모 열기index.html 보기.