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:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.
    鈥ero 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"