• En esta lección aprenderás cómo indicar a Webpack que te encuentras en modo desarrollo o producción. Algo que expandiremos en su momento en otra lección más avanzada.
  • Primero, vamos añadir los archivos JavaScript a su directorio (/js). Lo mismo para la imagen. No hay que olvidarse de actualizar las rutas.
  • En el punto de entrada descomentar las llamadas a console.log.
  • Lanzamos un build y probamos el navegador y su consola.
  • Ahora que sabemos que todo funciona bien, cómo indicar un modo de desarrollo y otro de producción y tomar decisiones en ambos casos.
  • Hasta ahora se utilizaba la variable NODE_ENV para decidir en qué entorno nos encontrábamos. Ya no es necesario.
  • Ahora, cuando creamos nuestras tareas en el objeto scripts de nuestro archivo package.json, podemos añadir varios flags y propiedades sobre el objeto env de environment o entorno.
    "build:dev": "npm run build -- --env.status=dev",
    "build:prod": "npm run build -- --env.status=prod",
  • Para recibir estas propiedades, en nuestra configuración, además de exponer un objeto, podemos exportar un una función que retorna un objeto. Aquí podemos usar el parámetro env y mostrarlo por consola.
    module.exports = (env) => {
    	console.log(env);
    	return {
    		...
    	}
    }
  • O también podemos hacer uso de la propiedad mode y el objeto argv de arguments para especificarlo. Sólo para development ya que por defecto está en production.
  • Añadimos nuestra tarea "build:dev": "npm run build -- --mode=development",
  • Si la lanzamos veremos que por ejemplo ya no minificamos nuestro bundle.
  • Podemos, por ejemplo y tal como se indica en la tabla, usar el modo production para pedir sourcemaps más extensos y en development unos más ligeros.
  • Añadimos en nuestra configuración devtool: argv.mode === "development" ? "inline-source-map" : "source-map",
  • Al lanzar un build de producción veremos que tenemos acceso al source map y podemos añadir puntos de ruptura para navegar por ellos.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Webpack en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende Webpack desde cero?

Resuelve todas tus dudas sobre Webpack en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬