• 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);
    };
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 📬