Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue