• 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 modo development, en lugar de escribir "a mano" directamente en webpack.config.js.
  • En nuestro package.json podemos usar el flag --mode y capturar su valor a través del objeto argv, 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 de mode.
...
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.
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 📬