• En la anterior lección dimos los primeros pasos para establecer una configuración de Webpack independiente para para development y otra para production.
  • Podríamos ir más allá en esta separación de responsabilidades y crear una configuración compuesta de varios archivos, en busca de una estructura super polivalente, como teaser de lo que haremos más adelante en el curso.
  • Es decir, componer (de ahí lo de config composition) diferentes configuraciones en base al valor de la propiedad mode del objeto argv que ya hemos utilizado.
  • Aunque se podría desglosar aún más, vamos a crear tres archivos de configuración nuevos. Uno para los apartados comunes, otro para desarrollo y otro para producción.
  • Con el uso de Webpack Merge se convierte en una tarea sencilla. Vamos a instalarlo con npm install --save-dev webpack-merge para añadirlo a nuestras dependencias de desarrollo.
  • Ahora sólo queda crear los nuevos archivos common, development y production en el directorio /config, por ejemplo, e ir moviendo nuestra configuración de forma apropiada.
  • Comprobamos que los builds en ambos modos funcionan, y así lo hacen. Aunque hay un pequeños problema.
  • Tendrás que corregir __dirname para que build no quede dentro del directorio config con path: path.resolve(__dirname, "../", "bundle").
  • El resultado debe ser algo parecido a esto:
    const WebpackMerge = require("webpack-merge");
    const commongConfig = require("./config/webpack.common");
    module.exports = (env, argv) => {
      const mode = argv.mode ? argv.mode : "production";
      const modeConfig = require(`./config/webpack.${mode}`);
      return WebpackMerge(commongConfig, modeConfig);
    };
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 📬