Webpack을 사용하여 글꼴을 멋지게 패키징하는 방법

이번에는 Webpack을 사용하여 글꼴 awesome을 패키징하는 방법과 Webpack을 사용하여 글꼴 awesome을 패키징할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다.

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

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

2. 항목 파일

require('font-awesome-webpack');

3에 Font-awesome을 도입하여 글꼴 파일을 처리하도록 설정합니다.

두 가지가 있습니다. 여기서는 폰트 파일을 따로 생성하고 싶지 않고, 폰트 파일과 CSS 파일을 하나의 파일로 만들고 싶다면 url-loader를 사용해서 다음과 같이 설정하면 됩니다.

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

여기서 매개변수 제한이 통과되었습니다. url-loader에 상대적으로 크게 설정하면 이 숫자를 사용자 정의할 수 있지만 가장 큰 글꼴 파일의 크기보다 커야 합니다. 왜냐하면 이 매개변수는 파일이 이 매개변수보다 작을 경우 URL 로더에 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Node.js+콘솔 출력 로그 파일 예제 분석

Vue를 사용하여 드래그 앤 드롭 효과를 얻는 방법

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