Webpack을 사용하여 글꼴을 멋지게 패키징하는 단계에 대한 자세한 설명

이번에는 Font-Awesome을 Webpack으로 패키징하는 단계에 대해 자세히 설명하겠습니다. Webpack으로 Font-Awesome을 패키징하는 주의사항은 무엇인가요?

webpack을 사용하여 Font-Awesome 또는 bootstrap을 구축할 때 가장 일반적인 문제 중 하나는 글꼴 파일 구축 문제입니다. 글꼴 파일을 찾을 수 없는 문제가 자주 발생합니다. 가져온 글꼴 파일을 올바르게 빌드하는 방법에 대해 이야기해 보겠습니다.

1. 먼저 종속성을 설치합니다.

npm install style-loader css-loader file-loader font-awesome-webpack --save-dev

2. 항목 파일3에 Font-awesome

require('font-awesome-webpack');

을 소개합니다. config.js 글꼴 파일을 별도로 생성하고 싶지 않고, 글꼴 파일과 CSS 파일을 하나의 파일로 만들고 싶은 경우에는 url-loader를 사용하면 됩니다.

  module: {
      rules: [
        // 省略其他配置...
        // font-awesome
        {
          test: /\.(eot|svg|ttf|woff|woff2)\w*/,
          loader: 'url-loader?limit=1000000'
        },
        // 省略其他配置...
      ]
  }

여기 url -Loader가 매개변수 제한을 전달하고 상대적으로 크게 설정합니다. 이 숫자는 사용자 정의할 수 있지만 가장 큰 글꼴 파일의 크기보다 커야 합니다. 파일이 이 매개변수보다 작은 경우 Data를 사용하십시오. URL은 파일에 직접 내장됩니다. 이 방법이 가장 편리하지만, 구축된 파일이 매우 크고 온라인 상태에서는 CDN을 사용하여 파일을 캐시할 수 있는 방법이 없다는 단점이 있습니다.

두 번째 방법은 빌드할 때 url-loader 또는 file-loader 파일의 출력 디렉터리를 지정하는 것입니다. 그러면 배포 시 Font-awesome이 빌드 중에 지정된 디렉터리의 글꼴 파일에 의존하고 검색이 수행되지 않습니다. 이때 webpack 빌드 구성은 다음과 같습니다.

  module: {
  rules: [
    // 省略其他配置...
    // font-awesome
    {
      test: /\.(eot|svg|ttf|woff|woff2)\w*/,
      loader: 'file-loader?publicPath=/static/res/&outputPath=font/'
    },
    // 省略其他配置...
  ]
}

위 구성으로 프로젝트를 빌드한 후, Font-awesome은 "/static/"에서 지정된 글꼴 파일을 검색합니다. res/font/" 디렉토리와 동시에 해당 글꼴 폴더가 빌드한 프로젝트에 생성됩니다. 이 글꼴 폴더의 글꼴 파일을 "/static/res/font" 디렉토리( publicPath가 "./" 이면 빌드 디렉터리의 글꼴 파일에 직접 의존하므로(복사할 필요 없음) 페이지에 액세스할 때 글꼴 파일을 올바르게 요청할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

PopupWindow 구성 요소의 Vue 구현 단계별 분석

jQuery 전자 시계 기능 구현 자세한 설명

위 내용은 Webpack을 사용하여 글꼴을 멋지게 패키징하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!