К содержанию

Tutorial de Webpack 5

Tutorial comprensible sobre el empaquetador Webpack con teoría y tareas para principiantes.

Básico

Principio de funcionamiento del empaquetador Webpack

Problema de caché en los navegadores

Webpack a través de módulos ES en Webpack

Instalación de Webpack

Configuración inicial del empaquetador Webpack

Configuración de la ejecución de la compilación de Webpack

Compilación de prueba con Webpack

Conexión del bundle al maquetado en Webpack

Importación de archivos en el punto de entrada de Webpack

Rutas absolutas en Webpack

Plugins en Webpack

Loaders en Webpack

Modos de construcción

Tipos de modos de compilación en Webpack

Cambio del modo de construcción en el archivo de configuración de Webpack

Modos de compilación mediante scripts en Webpack

Compilación automática en Webpack

Puntos de entrada y salida

Puntos de entrada y salida en Webpack

Punto de salida en Webpack

Múltiples puntos de entrada en Webpack

Hash en el archivo de compilación en Webpack

Nombres de los puntos de entrada en Webpack

Puntos de entrada nombrados como arrays en Webpack

Nombres de archivos de compilación en Webpack

Nombres y hash de archivos de compilación en Webpack

Ruta a la carpeta de construcción en Webpack

Contexto de puntos de entrada en Webpack

Estilos

Importación de estilos CSS en Webpack

Cargadores para estilos CSS en Webpack

Configuración de la importación de estilos CSS en Webpack

Prueba de importación de estilos CSS en Webpack

Configuración de la compilación CSS en un bundle en Webpack

Prueba de compilación de CSS en un bundle en Webpack

Nombre del archivo bundle CSS en Webpack

Hash del bundle CSS en Webpack

Múltiples paquetes CSS en Webpack

Conexión de bibliotecas CSS en Webpack

Trabajando con LESS en Webpack

Trabajando con SASS en Webpack

HTML

Trabajo con plantillas HTML en Webpack

Generación de maquetas HTML en Webpack

Múltiples bundles de scripts en un layout en Webpack

Bundles de scripts con hash en el layout en Webpack

Paquetes de estilos en el diseño en Webpack

Múltiples bundles de estilos en el diseño en Webpack

Tu propio archivo de diseño en Webpack

Recursos

Activos en Webpack

Activos en bundles JavaScript en Webpack

Recursos en bundles CSS en Webpack

Personalización de la ruta de archivos de recursos en Webpack

Personalización de la ruta a grupos de assets en Webpack

Recursos en línea en Webpack

Source ассеты en Webpack

Recursos estáticos comunes en Webpack

Complementos

Limpieza de la carpeta de construcción en Webpack

Copia de archivos en Webpack