Config mode
Introducción
Conceptos esenciales
Uso práctico
- 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 archivopackage.json
, podemos añadir varios flags y propiedades sobre el objetoenv
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 objetoargv
de arguments para especificarlo. Sólo paradevelopment
ya que por defecto está enproduction
. - 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 endevelopment
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.
Código inicial
¿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.