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

それがどのように機能するか

Webパック出力資産を調べて、同じ名前のフォント形式を識別します
コンテンツプロパティを指定し、Unicode文字を抽出するCSSルールを識別します
fontminを使用して、使用済みのグリフのみにTrueTypeフォントをマイニングします
TTFを他のすべての形式に変換します（ ttf 、 eot 、 svg 、 woff 、 woff2をサポートしますが、実際にはWOFFのみを気にする必要があります）
Webpack出力アセットをMinifiedバージョンに置き換えます

使用法

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' ;
}

Webpack構成をセットアップします

 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プラグインとして実行する必要があります。 Webパックプラグインを追加する最も簡単な方法は、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]