No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aplicar hashes al nombre de nuestros builds

16/22
Recursos

Aportes 21

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

plugins: [
    isDev ? () => {} : new WebpackManifestPlugin(),
  ],

El principal beneficio de aplicar hashes es que el nombre cambia cada vez que desplegamos con cambios hechos, entonces nuestros usuarios siempre van a tener la ultima versión que lancemos por qué el navegador va a considerarlos archivos distintos y no van a tener caché.

Para los que tengan problemas con la versión 3.0.0 el plugin no tiene default export entonces debemos importarlo asi:

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

Al intentar hacer el build se me formó un lío. Estoy usando últimas versiones de todo, excepto de webpack-manifest-plugin, pues sigue siendo la misma del curso.
Se presenta el siguiente error:

TypeError: Cannot read property 'length' of undefined
    at /Users/XXXXXXX/PlatziVideo-feature-router-redux/node_modules/webpack-manifest-plugin/lib/plugin.js:128:39

En ese punto ocurre la siguiente validación:

var isEntryAsset = asset.chunks.length > 0;

Resulta que el objeto asset ya no tiene (sabrá Mandrake por qué) la propiedad chunks. Ahora es así:

{
  type: 'asset',
  name: 'assets/app-7dd9eca0e982cb818b05.js',
  size: 200404,
  chunkNames: [ 'main' ],
  chunkIdHints: [],
  auxiliaryChunkNames: [],
  auxiliaryChunkIdHints: [],
  emitted: false,
  comparedForEmit: false,
  cached: true,
  info: {
    immutable: true,
    fullhash: '7dd9eca0e982cb818b05',
    javascriptModule: false,
    minimized: true,
    related: {
      license: 'assets/app-7dd9eca0e982cb818b05.js.LICENSE.txt',
      gziped: 'assets/app-7dd9eca0e982cb818b05.js.gz'
    }
  },
  filteredRelated: 2
}

Así que pensé que ahora sería el array llamado chunkNames, razón por la cual reemplacé dicha propiedad:

var isEntryAsset = asset.chunkNames.length > 0;

Y listo, el build empezó a funcionar perfectamente. Ahora ya tengo mi manifest.json:

{
  "main.css": "/assets/app-7dd9eca0e982cb818b05.css",
  "main.js": "/assets/app-7dd9eca0e982cb818b05.js",
  "assets/logo-platzi-video-BW2.png": "/assets/7104263cc7ae188d7e1275934c32a378.png",
  "assets/play-icon.png": "/assets/9a1e4bf4f3cb0556c15a96c17808dbf7.png",
  "assets/remove-icon.png": "/assets/1baf6f54be269d1d45a5ebb09a788ded.png",
  "assets/plus-icon.png": "/assets/82e73f0c9de0d9e64a4f7eb6917fe799.png",
  "assets/user-icon.png": "/assets/5a89d07e023cabc9bd46b8ef3e33b9c3.png",
  "assets/google-icon.png": "/assets/87fee39f3ffc377fa871d31587cc532c.png",
  "assets/twitter-icon.png": "/assets/0103ef81347edc3344acec319325eb81.png"
}

Claro, esto en una versión final de un proyecto exigirá una de dos:

  1. Crear un script postinstall para parchear el archivo usando alguna herramienta de consola.
  2. Usar patch-package para crear el respectivo parche a la dependencia.
    …pero eso ya es arena de otro costal.

Sinceramente el uso de un monton de condicionales en un solo archivo de configuracion de webpack me parece una mala practica pues a medida que agregas cosas se empieza a volver un spaguetti, estaba buscando si existe alguna alternativa (ademas de usar archivos completamente separados para produccion y para desarrollo) y me encontre con esta guia en donde explican que puedes tener 3 archivos, uno de common (comun para desarrollo y produccion) uno para la configuracion especifica de solo produccion y otro de desarrollo con cosas especificas de desarrollo https://webpack.js.org/guides/production/

¿Por qué es una buena práctica agregar hashes a los nombres de nuestros archivos?

De nuevo agrega paquetes magicamente sin explicar su beneficio o el problema que resuelve, aqui esta la documentacion de que es el manifest de webpack https://webpack.js.org/concepts/manifest/

Instale el paquete webpack-manifest-plugin con la version 3.0.0 y tengo el siguiente error

TypeError: ManifestPlugin is not a constructor

Para solucionarlo cambié un poco el webpack.config.js como dice la doc del paquete

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
/.../
	plugins: [
    	isDev ? () => {} : new WebpackManifestPlugin(),
  ],

Espero que sirva 😄

Porqué es importante el archivo manifest.json?

Cual es el beneficio de utilizar hashes en los nombres de los archivos, considero que se debió mencionar en la clase.

yp tengo un problema que debe ser una chorrada pero no encuentro donde solucionarlo, y es que el build se me genera, los tamaños son los adecuados a la clase, todo perfecto pero cuando inicio el node src/server solo me muestra el index.html no me carga la aplicación, ya revise las rutas de webpack y todo, me crea hashes me hace todo pero al lanzarla en producción no me va, ya configure el .env con la configuración de producción, a alguien mas le ha pasado? o alguien que me pueda aconsejar?

Buenas Noches, es necesario que la librería de webpack-manifest-plugin tenga que estar en las dependencias de development??
Es que no me da error pero no me genera el manifest.json.
La versión que tengo es la 3.0.0

por que ocupo la función síncrona para leer el archivo readFileSync?

En typescript al momento de usar JSON.parse teneis que pasar el buffer a String. Ya que los tipos no son compatibles 😕

A mi me pasa lo mismo que a @inquietus en su comentario sobre el prefijo 1 en los assets, pero me pasa solo cuando aplico la configuración de splitChunks para generar el vendor, y solo me sucede con el CSS, he revisado y todo esta igual al que se hace en la clase.

Información escencial sobre middlewares en Express por si aun tienen dudas al respecto Using Middleware

Configurar los hashes y manejarlos desde manifest.json y comprimiendo el código para que pesen lo menos posible

danethurber/webpack-manifest-plugin

npm install --save-dev webpack-manifest-plugin

Hola, tengo una duda a ver si me pueden ayudar

Cuando hago el bundle, en mi carpeta de public se generan el app.js y app.css pero también se están generando 1.app.js y 1.app.css

Alguien sabe a que se debe? estoy haciendo algo mal?

Uff que belleza.

Muchachos si al usar Manifest les aparece un error al compilar, en su package.json actualicen esta línea al importar su versión de Manifest.

"webpack-manifest-plugin": "3.0.0-rc.0"