El otro día me encontré con un caso especial en uno de nuestros clientes, necesitaban modificar la configuración de webpack usada para construir el bundle de su aplicación Angular.

Nos encontramos ante un proyecto que hace uso de Angular CLI, por lo que no tenemos acceso directo a la configuración de webpack. Además, hace uso de la versión 5 de Angular y migrar a una nueva versión no es una opción. Por tanto, no nos quedaba otra opción que usar el comando ng eject que explicaré a continuación.

Con este comando básicamente extraemos la configuración de webpack a un archivo y desactivamos los comandos de Angular CLI (ng serve, ng build, ng test, etc.) para usar directamente webpack. De este modo, tenemos acceso total a dicha configuración y podemos personalizar nuestro proceso de bundling.

Antes de nada, decir que sólo deberíamos usar este comando como última opción, puesto que en las últimas versiones de Angular ha desaparecido. Por ejemplo en la versión 6 de Angular deberiamos usar builders. Además, extrayendo la configuración de webpack ya tendremos más código a mantener en la aplicación, y seamos claros, no es igual de fácil ni legible que usar los comandos de Angular CLI directamente.

Dicho esto, vamos al lío:

ng eject force command

En este caso he usado el parámetro -force porque actualmente tengo scripts de npm definidos en el package.json de mi aplicación como “build”, “test”, etc y quiero sobreescribirlos con los respectivos comandos de webpack. Si no lo indicara me aparecería un warning advirtiéndome de que dichos scripts van a ser sobreescritos.

Una vez ejecutado el comando, podemos ver que se nos han añadido ciertos scripts npm a nuestro package.json:

1
2
3
4
5
6
7
8

"scripts": {
    [...]
    "start": "webpack-dev-server --port=4200",
    "test": "karma start ./karma.conf.js",
    "build": "webpack",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
    "e2e": "protractor ./protractor.conf.js"
}

Y nos ha creado el archivo de configuración de webpack de nuestro proyecto (webpack.config.js):

webpack config

Además, nos modificará nuestro angular-cli.json, añadiendo el parámetro de configuración ejected a true para que Angular CLI sepa que hemos ejecutado el comando y evitar que usemos los comandos nativos (ng build, ng serve, etc).

Ahora que ya tenemos nuestra configuración de webpack, podemos modificar lo que queramos, por ejemplo cambiar uno de los parámetros que se le pasan al plugin autoprefixer:

autoprefixer plugin config

Comentar que en mi caso, tuve que hacer dos pequeñas correcciones más a la configuración de webpack:

  • Cambiar las rutas absolutas a rutas relativas.
  • Como mi aplicación se ejecuta dentro de un contenedor Linux de Docker, tuve que cambiar las barras ”\“ dentro de las rutas por “/”.