Aprende Webpack desde cero

Config mode

  • 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.

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue