fontmin webpack 다운로드 fontmin webpack 소스 코드 다운로드

fontmin webpack

글꼴 다운로드

v4.0.0

다운로드

Fontmin-Webpack

아이콘 글꼴을 사용하는 내용으로 최소화합니다.

 # for webpack 5
npm install --save-dev fontmin-webpack
# for webpack 4
npm install --save-dev fontmin-webpack@^2.0.1
# for webpack <=3
npm install --save-dev fontmin-webpack@^1.0.2

작동 방식

이름을 가진 글꼴 형식을 식별하기 위해 웹 팩 출력 자산을 검사합니다.
컨텐츠 속성을 지정하고 유니 코드 문자를 추출하는 CSS 규칙을 식별합니다.
fontmin 사용하여 중고 글리프만을위한 트루 타입 글꼴을 조정합니다.
TTF를 다른 모든 형식으로 전환합니다 (실제로 Woff에 대해서만 돌봐야하지만 ttf , eot , svg , woff 및 woff2 지원)
웹 팩 출력 자산을 최소화 버전으로 대체합니다

용법

Fontmin-Webpack을 설치하십시오

npm install --save-dev fontmin-webpack

아이콘 글꼴을 포함하십시오

아래의 예는 Glyphs uf0c7 및 uf0ce 사용합니다

 @font-face {
  font-family : 'FontAwesome' ;
  src : url ( 'fontawesome-webfont.eot' ) format ( 'embedded-opentype' ) , url ( 'fontawesome-webfont.woff2' )
      format ( 'woff2' ) , url ( 'fontawesome-webfont.woff' ) format ( 'woff' ) , url ( 'fontawesome-webfont.ttf' )
      format ( 'ttf' );
}

/**
 * Remove other unused icons from the file.
 */
. fa-save : before ,
. fa-floppy-o : before {
  content : 'f0c7' ;
}
. fa-table : before {
  content : 'f0ce' ;
}

웹 팩 구성을 설정하십시오

 const FontminPlugin = require ( 'fontmin-webpack' )

module . exports = {
  entry : 'my-entry.js' ,
  output : {
    // ...
  } ,
  plugins : [
    // ...
    new FontminPlugin ( {
      autodetect : true , // automatically pull unicode characters from CSS
      glyphs : [ 'uf0c8' /* extra glyphs to include */ ] ,
      // note: these settings are mutually exclusive and allowedFilesRegex has priority over skippedFilesRegex
      allowedFilesRegex : null , // RegExp to only target specific fonts by their names
      skippedFilesRegex : null , // RegExp to skip specific fonts by their names
      textRegex : / .(js|css|html)$ / ,  // RegExp for searching text reference
      webpackCompilationHook : 'thisCompilation' , // Webpack compilation hook (for example PurgeCss webpack plugin use 'compilation' )
    } ) ,
  ] ,
}

vue3에서 사용합니다

Vue3 프로젝트에서 Purgecss는 웹 팩 플러그인으로 실행해야합니다. Webpack 플러그인을 추가하는 가장 쉬운 방법은 Vue.config.js에서 선언하는 것입니다.

이것은 vue3 / tailwindcss 3 / fontawesome 6을 가진 프로젝트의 샘플입니다.

`vue.config.js`

 const webpackPlugins = [ ] ;
const __DEBUG__ = '0' ; //turn to 1 for avoiding purgecss and fontmin

// **********************************
// Purgecss unused classes
//
if ( __DEBUG__ !== '1' ) {
  const PurgecssPlugin = require ( 'purgecss-webpack-plugin' ) ;
  const glob = require ( 'glob-all' )
  const purgeCssPlugin = new PurgecssPlugin ( {
    paths : glob . sync (
      [
        path . join ( __dirname , './public/*.html' ) ,
        path . join ( __dirname , './src/**/*.vue' ) ,
        path . join ( __dirname , './src/**/*.js' )
      ] ) ,
    safelist : [ / ^sm: / , / ^md: / , / ^lg: / , / ^xl: / , / ^2xl: / , / ^focus: / , / ^hover: / , / ^group-hover: / , / [.*] / , / ^basicLightbox / , / /[0-9] / , / ^tns / ] ,
    fontFace : true
  } )
  webpackPlugins . push ( purgeCssPlugin ) ;
}

// **********************************
// fontminifying Fontawesome
//
if ( __DEBUG__ !== '1' ) {
  const FontMinPlugin = require ( 'fontmin-webpack' ) ;
  const fontMinPlugin = new FontMinPlugin ( {
    autodetect : true ,
    glyphs : [ ] ,
    allowedFilesRegex : / ^fa[srltdb]*- / , // RegExp to only target specific fonts by their names
    skippedFilesRegex : null , // RegExp to skip specific fonts by their names
    textRegex : / .(js|css|html|vue)$ / ,  // RegExp for searching text reference
    webpackCompilationHook : 'compilation' , // Webpack compilation hook (for example PurgeCss webpack plugin use 'compilation' )
  } ) ;
  webpackPlugins . push ( fontMinPlugin ) ;
}

module . exports = {
   runtimeCompiler : true ,
   configureWebpack : {
    plugins : webpackPlugins ,
    devtool : false ,
    mode : 'production' ,
  } ,
} ;

분명히 필요한 종속성은 package.json에 추가되어야합니다

`package.json`

 "devDependencies" : {
…
    "fontmin-webpack" : " ^4.0.0 " ,
    "glob-all" : " ^3.3.0 " ,
    "purgecss-webpack-plugin" : " ^4.1.3 " ,
    "webpack" : " ^5.71.0 " ,
…
}

바이트를 저장하십시오

전에

 674f50d287a8c48dc19ba404d20fe713.eot     166 kB          [emitted]
912ec66d7572ff821749319396470bde.svg     444 kB          [emitted]  [big]
b06871f281fee6b241d60582ae9369b9.ttf     166 kB          [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2  77.2 kB          [emitted]
fee66e712a8a08eef5805a46892932ad.woff     98 kB          [emitted]

후에

 674f50d287a8c48dc19ba404d20fe713.eot    2.82 kB          [emitted]
912ec66d7572ff821749319396470bde.svg    2.88 kB          [emitted]
b06871f281fee6b241d60582ae9369b9.ttf    2.64 kB          [emitted]
af7ae505a9eed503f8b8e6982036873e.woff2  1.01 kB          [emitted]
fee66e712a8a08eef5805a46892932ad.woff   2.72 kB          [emitted]