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.