Configuración de desarrollo
Introducción
Conceptos esenciales
Uso práctico
- En nuestra configuración de Webpack estamos indicado el modo
development
ya que queremos utilizar Webpack Dev Server, además de otras ayudas y optimizaciones para nuestro proceso de compilación. - Aunque más adelante veremos cómo funciona el modo
production
y buscaremos componer una configuración múltiple para Webpack, por ahora vamos a indicarle a través de la línea de comando que estamos usando el mododevelopment
, en lugar de escribir "a mano" directamente enwebpack.config.js
. - En nuestro
package.json
podemos usar el flag--mode
y capturar su valor a través del objetoargv
, tal como hicimos al principio del curso.
"scripts": {
...
"server": "webpack-dev-server --open --mode=development"
},
- En nuestra configuración podemos hacer uso de ese nuevo valor en la propiedad
mode
.
module.exports = (env, argv) => {
return {
mode: agv.mode,
...
}
}
- Desde este momento podemos definir un comportamiento específico para diferentes características de Webpack, como los source maps. Por ejemplo, podemos pedir una versión inline más ligera para modo desarrollo y otra más pesada para modo producción a través de la propiedad
devtool
y creando una constante para comparar el valor demode
.
...
const isDevelopment = argv.mode === "development";
return {
devtool: isDevelopment ? "#eval-source-map" : "source-map",
}
- Por supuesto, a parte de los source maps existen muchas más diferencias en el comportamiento de Webpack si usamos modo producción o desarrollo. Te recomiendo que le eches un vistazo a la documentación para un mayor contexto.
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.