A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Loaders de fuentes

11/28
Recursos

Aportes 49

Preguntas 29

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Esta parte de configuraci贸n se me hizo complicada y muy por sentada. As铆 que te lo explico
En las options:

options: {
        limit: 10000, // O LE PASAMOS UN BOOLEANOS TRUE O FALSE
        // Habilita o deshabilita la transformaci贸n de archivos en base64.
       mimetype: 'aplication/font-woff',
       // Especifica el tipo MIME con el que se alinear谩 el archivo. 
       // Los MIME Types (Multipurpose Internet Mail Extensions)
       // son la manera standard de mandar contenido a trav茅s de la red.
       name: "[name].[ext]",
       // EL NOMBRE INICIAL DEL ARCHIVO + SU EXTENSI脫N
       // PUEDES AGREGARLE [name]hola.[ext] y el output del archivo seria 
       // ubuntu-regularhola.woff
       outputPath: './assets/fonts/', 
       // EL DIRECTORIO DE SALIDA (SIN COMPLICACIONES)
       publicPath: './assets/fonts/',
       // EL DIRECTORIO PUBLICO (SIN COMPLICACIONES)
      esModule: false 
	   // AVISAR EXPLICITAMENTE SI ES UN MODULO
}

Para las imagenes

assetModuleFilename: 'assets/images/[hash][ext]'

Esta instrucci贸n hace que webpack le agregue un hash ( un hash es una serie de caracteres aleatorios) y su extencion por medio de esas variables en el string
Asi quedo el Webpack Config

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
    // mode: 'production', // LE INDICO EL MODO EXPLICITAMENTE
    entry: './src/index.js', // el punto de entrada de mi aplicaci贸n
    output: { // Esta es la salida de mi bundle
        path: path.resolve(__dirname, 'dist'),
        // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
        // para no tener conflictos entre Linux, Windows, etc
        filename: 'main.js', 
        // EL NOMBRE DEL ARCHIVO FINAL,
        assetModuleFilename: 'assets/images/[hash][ext][query]'
    },
    resolve: {
        extensions: ['.js'] // LOS ARCHIVOS QUE WEBPACK VA A LEER
    },
    module: {
        // REGLAS PARA TRABAJAR CON WEBPACK
        rules : [
            {
                test: /\.m?js$/, // LEE LOS ARCHIVOS CON EXTENSION .JS,
                exclude: /node_modules/, // IGNORA LOS MODULOS DE LA CARPETA
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css|.styl$/i,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' , 'stylus-loader' ]
            },
            {
                test: /\.png/, // REGLA PARA ACEPTAR IMAGENES .PNG
                type: 'asset/resource'
            },
            {
                test: /\.(woff|woff2)$/, // REGLA PARA ARCHIVOS WOFF | WOFF2
                use: {
                    loader: 'url-loader', // NOMBRE DEL LOADER
                    options: {
                        limit: false, // O LE PASAMOS UN NUMERO
                        // Habilita o deshabilita la transformaci贸n de archivos en base64.
                        mimetype: 'aplication/font-woff',
                        // Especifica el tipo MIME con el que se alinear谩 el archivo. 
                        // Los MIME Types (Multipurpose Internet Mail Extensions)
                        // son la manera standard de mandar contenido a trav茅s de la red.
                        name: "[name].[ext]",
                        // EL NOMBRE INICIAL DEL PROYECTO + SU EXTENSI脫N
                        // PUEDES AGREGARLE [name]hola.[ext] y el output del archivo seria 
                        // ubuntu-regularhola.woff
                        outputPath: './assets/fonts/', 
                        // EL DIRECTORIO DE SALIDA (SIN COMPLICACIONES)
                        publicPath: './assets/fonts/',
                        // EL DIRECTORIO PUBLICO (SIN COMPLICACIONES)
                        esModule: false
                    }
                }
            }
        ]
    },
    // SECCION DE PLUGINS
    plugins: [
        new HtmlWebpackPlugin({ // CONFIGURACI脫N DEL PLUGIN
            inject: true, // INYECTA EL BUNDLE AL TEMPLATE HTML
            template: './public/index.html', // LA RUTA AL TEMPLATE HTML
            filename: './index.html' // NOMBRE FINAL DEL ARCHIVO
        }),
        new MiniCssExtractPlugin(), // INSTANCIAMOS EL PLUGIN
        new CopyPlugin({ // CONFIGURACI脫N DEL COPY PLUGIN
            patterns: [
                {
                    from: path.resolve(__dirname , "src" , 'assets/images'), // CARPETA A MOVER AL DIST
                    to: "assets/images" // RUTA FINAL DEL DIST
                }
            ]
        })
    ]
}

pido por favor que el profesor Oscar Barajas EXPLIQUE MAS DETALLADAMENTE lo que hace ya que SOLO DICE LO QUE ESCRIBE y no da fundamentos a lo que HACE

隆Que onda gente!!! Leyendo la documentaci贸n, buscando y jugando un poco encontr茅 una alternativa perfecta para empaquetar nuestras fuentes o resources sin necesidad de instalar url-loaderr o file-loader.

  {
        test: /\.(woff|woff2)$/,
        type: "asset/resource",
        generator: {
          filename: "assets/fonts/[name][ext]"
        }
  }```

馃敜 Loaders de fuentes

<h4>Apuntes</h4>
  • Cuando utilizamos fuentes externas una buena pr谩ctica es descargarlas a nuestro proyecto
    • Debido a que no hara un llamado a otros sitios
  • Por ello es importante usarlo dentro de webpack
  • Para esta tarea instalaras y usaras 鈥渇ile-loader鈥 y 鈥渦rl-loader鈥

instalaci贸n con NPM

npm install url-loader file-loader -D

instalaci贸n con YARN

yarn add url-loader file-loader -D
  • Para aplicar esta configuraci贸n debes agregar la siguiente informaci贸n
module.exports = {
	...
  module: {
    rules: [
			...
      {
        test: /\.(woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            // limit => limite de tama帽o
            limit: 10000,
            // Mimetype => tipo de dato
            mimetype: "application/font-woff",
            // name => nombre de salida
            name: "[name].[ext]",
            // outputPath => donde se va a guardar en la carpeta final
            outputPath: "./assets/fonts/",
            publicPath: "./assets/fonts/",
            esModule: false,
          }
        }
      }
    ]
  },
	...
}
  • Es importante que dentro de los estilos agregues @font-face
@font-face {
	font-family: "Ubuntu";
	src: url("../assets/fonts/ubuntu-regular.woff2") format('woff2'),
			 url("../assets/fonts/ubuntu-regular.woff") format('woff');
	font-weight: 400;
	font-style: normal;
}

La instalaci贸n de file-loader, url-loader y raw-loader ya no es necesario a partir de Webpack 5 ya que usando Asset Modules podemos hacer lo mismo y de forma optimizada.

La implementaci贸n de fonts quedar铆a de la siguiente manera:

      {
        test: /\.(woff|woff2)$/i,  // Tipos de fuentes a incluir
        type: 'asset/resource',  // Tipo de m贸dulo a usar (este mismo puede ser usado para archivos de im谩genes)
        generator: {
          filename: 'static/fonts/[hash][ext][query]',  // Directorio de salida
        },
      },

Como siempre, tuve que invertigar TODO por otros medios, viendo videos de un poco mas de 1 hora en youtube, donde lo explican super claro. No tengo nada contra este profesor, se nota que es un crack en su area. Pero para ensenar aun tiene mucho por mejorar.

Lo peor es que casi media escuela de JS la imparte el y todos sus cursos hay muchos comentarios que coinciden con mi punto de vista.

Demasiado pobre la explicaci贸n de esta clase y las configuraci贸n.

esModule: false dice que no lo vamos a usar鈥 ok, que carajos es lo que no vamos a usar? que es esModule?

Si, ya se que es nuestro deber leer documentaci贸n, pero no es el 煤nico tema que explica por encima d谩ndolo por sentado como si todos supi茅ramos de qu茅 est谩 hablando o qu茅 es lo que hace cada partecita de esas configuraciones.

Eso est谩 muy desordenado, todo lo avienta a la carpeta de assets y el orden deber铆a de ser igual como lo tienes en src replicarlo en el folder de dist y assets, aqu铆 pongo mi configuraci贸n

La parte del module.exports

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    assetModuleFilename: 'assets/[hash][ext][query]'
  },

module:

  module: {
    rules: [
      {
        test: /\.m?js$/,
        use: ["babel-loader"],
        exclude: /node_modules/,
      },
      // Styles
      {
        test: /\.css|.sass|.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          //'style-loader',
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
      // Images
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename : 'images/[hash][ext][query]',
        }
      },
      // Fonts
      {
        test: /\.(woff2?|ttf|eot)(\?v=\w+)?$/,
        type: 'asset/resource',
        generator: {
          filename : 'fonts/[name][ext][query]',
        }
      },
    ],
  },

y sin tanto rollo se logra un mejor orden el dist queda mejor acomodado y van comprimidas las img en base64 y el scss y css va unificado en un solo archivo.

Link a la imagen https://ibb.co/rvJ8vX7

Venia tan animada con la escuela de JavaScript que estaba haciendo curso por dia, hasta que llegue a esta curso y a esta explicaci贸n tan p茅sima que me est谩n dando ganas de no seguir al ver que Oscar es el profesor de los pr贸ximos cursos. es un sentimiento totalmente personal porque creo que si el objetivo es ense帽ar sobre qu茅 es y para qu茅 sirve web pack el ejercicio desarrollado est谩 muy mal orientado, la verdad me genera m谩s dudas que comprensi贸n la forma que se da cada tema, no s茅 si para este curso hab铆a que llegar con alg煤n conocimiento experto previo teniendo en cuenta que he venido siguiendo la ruta de aprendizaje de la escuela y creo que no es as铆.
Si la idea de estas clases es simplemente replicar el ejercicio del profesor sin que el explique el por qu茅 cada cosa, la verdad me parece totalmente inadecuado.
Seguir茅 porque algo me quedara y entendiendo que debo profundizar por mi lado para logar comprender el objetivo de este tema.

Buenaas! No entiendo el por qu茅 al compilar a m铆 me aparecen tambi茅n las fuentes con hash y al profesor no)

Me uno a las voces que piden actualizaci贸n de 茅ste curso por dos razones:

  1. Est谩 desactualizado.
  2. Puede ser potencialmente peligroso.

El punto 1 es l贸gico, ya hay mejores formas de hacer lo mismo sin instalar otras dependencias.

Sobre el segundo punto, les recomiendo seguir la soluci贸n de Jhean Carlos que est谩 en los comentarios y dejarle un coraz贸n.
Al instalar las dependencias, el mismo npn advierte de problemas graves de seguridad:

found 2 high severity vulnerabilities

La verdad, nunca me hab铆a encontrado con 茅ste mensaje en NPM.

Segundo, la soluci贸n del curso no me funcion贸, el navegador no cargaba las fuentes, pero con la soluci贸n que mencion茅 arriba, s铆.

Saludos.

Y bueno, a tirar codigo como pan caliente sin explicar absolutamente nada, como todos los cursos de este senor.

Agregu茅 algunos comentarios en la secci贸n de options para url-loader. Siento que la explicaci贸n es muy general

options: {
            // limit: cuando se pasa true/false, habilita/deshabilita la transformaci贸n a base64
            //        cuando se indica un n煤mero o string indica el tama帽o m谩ximo de un archivo en bytes
            limit: 10000,
            // Especifica el mimetype que tendr谩 el archivo
            mimetype: "application/font-woff",
            name: "[name].[ext]",
            outputPath: "./assets/fonts/",
            publicPath: "./assets/fonts/",
            //Por default, se generan m贸dulos con sintaxis de ES. Para habilitar el uso de sintaxis com煤n de JS, el valor es false
            esModule: false,

Es una buena pr谩ctica incorporar las fuentes que use la aplicaci贸n directamente al proyecto, as铆 este no tiene que hacer una llamada por medio de internet.

Lo primero para esto es identificar la fuente que se est谩 usando y descargarla en formato woff, optimizado para la web.

Una vez hecho esto importamos la fuente al CSS directamente desde un archivo en el proyecto.

Ahora hay que hacer que copiar las fuentes a la carpeta dist. Para esto utilizamos las dependencias ulr-loader y file-loader.

Para instalarlos usamos el comando npm i url-loader file-loader -D.

Luego agregamos la configuraci贸n al archivo de Webpack

Me lo estoy pasando bien y conociendo webpack pero ni de loco podr茅 acordarme de todos los pasos que estamos siguiendo estamos instalando mill cosas y cada cosa tiene su configuraci贸n.
Esta fenomenal como curso para conocer la herramienta pero como me toque trabajar con webpack tendr茅 q b谩sicamente que ir investigando como hacer cada cosa en ese momento

En esta clase veremos como incorporar fuentes en nuestro proyecto y de esta forma ahorrar espacio para no hacerlo desde cdns

Lo que debemos hacer primero es tener nuestras fuentes listas para ser utilizadas y para esto podremos descargarlas por google font o otro apartado

Google fonts te permite descargar las fonts pero no en el formato woff

  • A帽adiremos nuestras fuentes en nuestro css para hacer uso de ellas
/* Vamos a anadir nuestras fuentes en nuestro proyecto (fuentes que descargamos)*/
/* De esta forma no vamos a hacer uso del import que estamos haciendo*/

@font-face {

	font-family: 'Ubuntu';
	src: url('../assets/fonts/ubuntu-300.woff2') format('woff2'),
		url('../assets/fonts/ubuntu-300.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

Vamos a copiar de assets a la carpeta dist para poder hacer uso de estas fuentes

  • Para eso necesitamos que instalar dos recursos que nos van a ayudar a leer archivos y tambien a moverlos
  • Instalamos las dependencias para poder hacer uso de las fuentes url loader y file loader
npm install url-loader file-loader -D

Ahora las configuramos en nuestro archivo de webpack en la parte de module

en las rules

//anadimos la configuracion de las dependencias que estamos usando
      {

        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options:{

            limit:10000,
            mimetype:"application/font-woff",
            name: "[name].[ext]",
            outputPath: "./assets/fonts/",
            publicPath: "./assets/fonts/",
            esModule: false,
          }
        }

Luego la pondremos en la parte del output

output:{
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    //para insertar el cambio y mover las fuentes a otra carpte lo hacemos aqui
    assetModuleFilename: 'assets/image/[hash][ext][query]'
  },

Luego compilamos nuestro archivo de webpack y vemos como en nuestra carpeta dist ya contamos con nuestras fuentes

0:02 QUE FUE !!

Como ya han mencionado MIME Type, es Multipurpose Internet Mail Extensions.

Es una etiqueta 鈥渓abel鈥 utilizada para indentificar un tipo de dato que es utilizado, as铆, el software sabe como trabajar con esos datos. Tiene el mismo prop贸sito en la internet como las extensiones de archivo (.txt, .docx, .xlsx) en Microsoft Windows.

Ejemplificando鈥 si el servidor dice: 鈥淓sto es un text/html鈥, el cliente entiende, 鈥淎h, esto es un documento HTML, lo puedo renderizar internamente鈥.

Comunmente lo hemos encontrado en la cabeceras de los mensajes HTTP (para describir el contenido que un servidor HTTP est谩 respondiendo o el formato de los datos que est谩n siendo POSTeados en una petici贸n) y tambi茅n en las cabeceras de emails (para describir el formato del mensaje y los adjuntos).

Espero les sirva tanto como a mi.

Fuente: [https://stackoverflow.com/questions/3828352/what-is-a-mime-type](What is a MIME type?)

estos son los formatos de fuentes para los navegadores, supongo que por eso, utilizamos los dos formatos (woff|woff2).

Hola amiguitos, si no aparece la fuente, y usan chrome es porque tienen pre configurado por defecto un estilo de fuente distinto, lo van a saber por que no importa si bloquean la fuente ubunto y la san serif, siempre les saldra X fuente, en mi caso siempre veo la Arial xD.

Asi que no pierdas 30 minutos como yo releyendo el codigo xD

鈥淓n este caso vamos a decirle que vamos hacer estas implementaciones en lo que viene siendo nuestras particularidades, en lo que vamos a requerir Y, va, a ser, nuestro recurso que yo tengo de esta misma particularidad de nuestra l贸gica que estamos trabajando en esta forma. Obviamente es lo que nosotros tenemos que requerir.鈥

Lo siento, se me hace dif铆cil entender

Pues nada, que tuve un error y por no poner atenci贸n estuve como 2 horas buscando hasta que hall茅 que en este fragmento de c贸digo escrib铆 option en vez de options(falta la letra 鈥渟鈥) que a simple vista no era tan perceptible para m铆: 馃う鈥嶁檪锔

// ...
use: {
  loader: 'url-loader',
  option: {
  // ...

vs

// ...
use: {
  loader: 'url-loader',
  options: {
  // ...

Al inicio no se generaban los archivos al igual que el resultado de Oscar y vi que era por un tema de la versi贸n de Webpack. Podr铆a Platzi hacer hincapi茅 (cada vez que se trabaje con NPM) en la versi贸n de los paquetes con los que se trabaja. Esto para evitar conflictos con actualizaciones para quienes llevan los cursos despu茅s de cierto periodo desde su publicaci贸n.

{
        test: /\.(woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 10000,
            mimetype:"application/font-woff",
            name: "[name].[ext]",
            outputPath: "./assets/fonts/",
            publicPath: "./assets/fonts/",
            esModule: false
          }
        }
      }```

Tuve problemas con el paso a paso explicado porque no me tomaba las fuentes el navegador. Investigando un poco me di cuenta que ten铆a que ver con la versi贸n de Webpack.
A partir de la versi贸n 5 ya no es necesario instalar ning煤n loader porque esta funcionalidad viene integrada por defecto. El resto de pasos son iguales solo que en la configuraci贸n del archivo webpack.config.js debemos manejar lo siguiente:

{
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      type: "asset/resource",
         generator: {
             filename: "assets/fonts/[hash][ext][query]",
         },
      }           	
}          		

La opci贸n generator se utiliza para definir otra subcarpeta dentro de assets de tal forma que las fuentes no queden mezcladas con las im谩genes

Otro curso mas que se me vuele tedioso, parece estar desactualizado. Hay comentarios viejos sin contestar, nadie de platzi se asoma por estos lados.

El profesor explicando a 1000 por hora, hay cosas que no se explican y toca busca por fuera ( youtube).

Oscar un crack en el tema de JS, pero como profesor deja mucho que desear.

Es muy superficial la forma en que explica el profesor, aparte que lo hace a velocidad como para alguien que est谩 a su nivel de conocimiento. La verdad que se deber铆a mejorar en explicar m谩s detalladamente.

Es comodo poder configurar y hacef uso de tecnologias de empaquetado pero la verdad que lo que son los setup.js o los configs.js son muy molestos a la hora de usar ya que requieren de mucha lectura y entendimiento de como usar labherramients

11.-Loaders de fuentes

Es una de las mejores optimizaciones al proyecto cuando usamos fuentes externas es incorporarlas al proyecto, para no hacer un llamado a ellas.

  • Primero identificamos que fuente estamos usando. Como podemos ver en el CSS estamos importando las fuentes desde google fonts.
  • Las descargamos, en este caso ya est谩n en assets.
  • Cambiamos el recurso creando una parte de l贸gica de las fonts que usaremos. As铆 ya no necesitaremos el import.
@font-face {
  font-family: "Ubuntu";
  src: url("../assets/fonts/ubuntu-regular.woff2") format("woff2"),
    url("../assets/fonts/ubuntu-regular.woff") format("woff"); 
/*Url uede ser del navegador o de la pc*/
  font-weight: 400;
  font-style: normal;
}
  • Ahora copiamos de assets a dist estos elementos, vamos a instalar recursos que nos ayuden a leer archivos y a moverlos.
npm install url-loader file-loader -D
  • Ahora en la configuraci贸n de webpack vamos a a帽adir los recursos dentro de module.
  • Webpack lo que hace es que lee el main.css, identifica que estamos usando una fuente y la mueve a la carpeta que requerimos.
npm install url-loader file-loader -D

no conocia la fuente de ubuntu que cool que tenga una

Hola tengo el siguiente error, adicionalmente siguiendo el ejemplo se repite la copia de las im谩genes y c贸mo estas quedan guardadas en el dist.

Es debe ser el peor curso con diferencia que ha tenido que seguir, imposible seguir el ritmo, no explica, no pausa para detallar, no se entiende el porque del 99% de lo que pone.

Loaders de fuente
Optimizaciones del proyecto
Agregamos las fonts al archivo main.css

@font-face {
	font-family: 'Ubuntu';
	src: url('../assets/fonts/ubuntu-300.woff2') format('woff2'),
		url('../assets/fonts/ubuntu-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

El archivo de carga.
Instalamos

npm i url-loader file-loader -D

Archivo de webpack: se encuentra la configuraci贸n del plugin para el proyecto.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
	entry:  './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
        assetModuleFilename: 'assets/images/[hash]'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css|.scss|.styl$/i,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'stylus-loader',
            ]
        },
        {
            test: /\.png/,
            type: 'asset/resource'
        },
        {
            test: /\.(woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    mimetype: "application/font-woff",
                    name: "[name].[ext]",
                    outputPath: "./assets/fonts/",
                    publicPath: "./assets/fonts/",
                    esModule: false,
                }
            }
        }

    ]},
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin(),
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, "src", "assets/images"),
                    to: "assets/images"
                }
            ]
        })
    ]

} 

cada segundo es este curso es genial

Desde Webpack 5 los loaders: url-loader file-loader raw-loader est谩n 鈥榙eprecated鈥, y se deber铆a usar los m贸dulos nativos de Webpack.

Les deja esta p谩gina nos ayuda a transformar las fuentes en diferentes extensiones y as铆 dar m谩s soporte a navegadores, incluso te da un archivo.css con el c贸digo de implementaci贸n para copiar y pegar.

mejor dejo el @import en main.css

Broma鈥 tocara leer algo de documentaci贸n.

creo que toca repasar mucho esto de webpack

por si algo aqui esta la documentacion oficial

Seg煤n webpack, es mejor cargar las fuentes as铆:

module: {
   rules: [
     {
       test: /\.(woff|woff2)$/,
       type: 'asset/resource'
     }
   ]
 },

Ref: https://webpack.js.org/guides/asset-modules/

En este apartado tenemos nuevas opciones para el manejo de assets de nuestra aplicacion, mas especificamente de las fonts, agregadas directamente desde nuestro proyecto, para no llamarlas a un recurso externo, sino descargarlas y manejarlas como un archivo tipo woff, woff2, entre otros. Estas fuentes se pueden descargar desde la siguiente pagina:

https://google-webfonts-helper.herokuapp.com/fonts/ubuntu?subsets=cyrillic,latin

lo primero es modificar mi CSS, la idea ya es no utilizar el importa, para traer fuentes externas por ejemplo de google chrome, sino implmentarlas internamente en el proyecto:

@import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500";
--------------------------------------------------------------------
@font-face {
	font-family: "Ubuntu";
	src: url("../assets/fonts/ubuntu-regular.woff2") format("woff2"),
		url("../assets/fonts/ubuntu-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
}

En el curso se utiliza la dependencia url-loader configurada con algunas opciones, esto lo hacemos de la siguiente manera:

{

	test: /\.(woff|woff2)$/,
	use:{
		loader: 'url-loader',
		//opciones para indcicar donde estan los archivos,
		//y otras configuraciones
		options: {
			//tama帽o en bytes de los archivos.*
			limit: 10000
			//establece el tipo del MIME(Multipurpose Internet Mail Extensions
			//o tipos de url que van a ser transformadas.
			mimetype: "application/font-woff",
			//especifica, nombre y extension como filename
			name: "[name].[ext]",
			outputPath: "./assets/fonts/",
			publicPath: "./assets/fonts/",
			esModule: false,
			},
		}
}

Pero este recurso de url-loader esta deprecado, y no funciona exactamente como queremos, esta herramienta se encuetra ya incluida en las versiones superiores de webpack5, por lo que ya existe una manera mas sencilla de realizar la implementacion de las fonts con webpack, ademas de importarlos a la carpeta dist para tenerlos como recursos de la aplicacion:

{
	test: /\.(woff|woff2)$/,
	type: 'asset/resource',
	generator:{
	    filename: "assets/fonts/[hash][ext][query]"
	}
}

Tambien podemos aprendimos una nueva configuracion, la cual va ubicada en el objeto output de la configuracion de webpack (Donde se le indica la carpeta dist de salida), con la cual podemos establecer una carpeta standard, donde van a ir todos los recursos identificados como 鈥渢ype: asset鈥 o type: 鈥渁sset/resource鈥, en el codigo anteriore utilizamos el generator.filename, para cambiar el destino de las fonts, que por defecto se toman como assets.

assetModuleFilename: 'assets/images/[hash][ext][query]

Si puso los archivos de las fuentes dentro de dist pero sin tener su respectiva carpeta de fonts, revisen la siguiente linea que est茅 bien escrita:

outputPath: "./assets/fonts/"

Saludos,
Tuve inconvenientes con las fuentes y esta soluci贸n me funcion贸:
Adding Fonts 馃馃馃

Esta p谩gina te permite convertir tus fuentes a woff. Espero les sirva 馃槂

La mejor optimizacion con fuentes externas es incorporarlas a nuestro proyecto, de esta forma no hacemos un llamado y nuestro proyecto no es tan pesado. Con webpack podemos hacerlo de forma local.

Primero necesitamos saber que fuentes estamos utilizando para nuestros proyectos. Despues tenemos que descargarlas, podemos hacerlo desde google fonts pero nos descargara en otro formato, el que realmente necesitamos es el 鈥.woff鈥

Ahora agregaremos al inicio de nuestro CSS

@font-face {
	font-family: 'Ubuntu';
	src: url('../assets/fonts/ubuntu-regular.woff2') format('woff2'),
	url('../assets/fonts/ubuntu-regular.woff') format('woff');	
	font-weight: 400;
	font-style:normal;
}

De esta forma no ocuparemos importar nada desde ninguna pagina pero hace falta pasar estos archivos a la carpeta DIST de nuestro proyecto. Para eso instalaremos dos recursos para leer archivos y moverlos si es el caso, con:

npm install url-loader file-loader -D

Ahora tenemos que decirle las nuevas reglas y configuraciones que agregaremos, como la regla de:

{
	test: /\.(woff|woff2)$./,
	use:{
		loder:'url-loader',
		options: {
			limit:10000,
			mimetype: "application/font-wolf",
			name: "[name].[ext]",
			outputPath: "./assets/fonts/",
			publicPath: "./assets/fonts/",
			esModule: false,
			},
		}
}
<h3>Loader de fuentes</h3>

Normalmente las fuentes de nuestros proyectos vienen directamente de Google Fonts, 驴pero que pasa si queremos descargar estas fuentes a nuestro proyecto?

Podemos descargarla y empaquetarla con Webpack pero necesitamos un formato woff.

Una vez teniendo las fuentes, podemos empaquetarlas con los siguientes pasos.

@font-face {
	font-family: 'Ubuntu';
	src: url('../assets/fonts/ubuntu-regular.woff2') format('woff2'), url('../assets/fonts/ubuntu-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
  • En module.exports especificamos la ruta donde se deben guardar los archivos de imagen.
  • Luego agregamos la configuraci贸n del URL-Loader
	module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    assetModuleFilename: 'assets/images/[hash][ext][query]'
  },

					{
      test: /\.(woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 1000,
          mimetype: "application/font-woff",
          name: "[name].[ext]",
          outputPath: "./assets/fonts/", 
          publicPath: "./assets/fonts/", 
          esModule: false,
          },

馃憣

Adicionalmente dentro de la secci贸n @font-face, se puede adicionar la propiedad: font-display: swap. Con esto le decimos al navegador que cargue temporalmente una fuente del sistema, mientras carga la fuente personalizada y as铆 evitamos mostrar texto invisible.
https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools