Aprende Webpack desde cero

Componer configuración

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

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue