Configuración de desarrollo

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