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

它如何工作

检查您的WebPack输出资产以识别具有相同名称的字体格式
标识指定内容属性并提取Unicode字符的CSS规则
使用fontmin将TrueType字体缩小到仅使用的字形
将TTF转换回所有其他格式（支持ttf ， eot ， svg ， woff和woff2尽管您实际上只需要关心Woff）
用缩小版本替换WebPack输出资产

用法

安装fontmin-webpack

npm install --save-dev fontmin-webpack

包括您的图标字体

下面的示例使用字形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插件执行。添加WebPack插件的最简单方法是在vue.config.js中声明它们

这是一个带有VUE3 / tailwindcss 3 / fontawesome的项目的示例

`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`

 "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]