Webpack bundle para producción
Hace mucho que hice este webpack.config y realmente no recuerdo de donde saqué todo la información, pues son pedazos de diferentes posts que encontré en internet. Siendo uno de los que utilicé este
Sabemos que Webpack crea un bundle de todo el JavaScript (y con los plugins correctos otro tipo de archivos) que utiliza nuestra app, es muy utilizado con React y no me consta, pero asumo que los Frameworks como Ember.js o Angular.js también lo utilizan.
React utiliza en mucho de su código la variable de ambiente (no sé si la traducción sea correcta, pero el nombre es process.env) principalmete para alertas durante el desarrollo. Cuando Webpack crea el bundle y no está configurado para producción agrega mucho de este código a nuestro bundle cosa que hace que pese bastante. En este tutorial vamos a crear un bundle que te dará un bundle muy ligero.
Voy a asumir que sabes como funciona el webpack y por esa razón ya estás buscando como crear uno en producción, así que continuo con este simple tutorial
Mi bundle normal
Es un bundle muy sencillo y crea un bundle con estas características
Lo primero que tenemos que hacer es minificar el código, por esa razón vamos a crear un nuevo script en NPM o en su defecto, modificar el que utilizamos para hacer el build, en mi caso voy a hacer lo siguiente
//package.json“scripts”: {"build": "webpack",
//Agregamos un script para que corra en producción
"production-build": "webpack -p"}
La -p es el argumento de production que en realidad lo que hace es quitar todos las ayudas de React en process.env.NODE_ENV = 'development'
Ya para terminar este sencillo tutorial, vamos a modificar el webpack.config.js que será como el de que vemos abajo, cada cambio tiene un comentario arriba para que se pueda entender lo que hace.
Instalar los plugins de babel transform-react-inline-elements y transform-react-constant-elements
$ npm i -D babel-plugin-transform-react-inline-elements babel-plugin-transform-react-constant-elements
#Que es lo mismo que npm install --save-dev ....Por favor no sólo copies el código de abajo pues este está hecho para funcionar en una app específica, sólo modifica lo necesario para que funcione en tu app
$ NODE_ENV=production; npm run build
# Si utilizas fish.shell
# set -x NODE_ENV production; npm run buildAl correrlo con la variable activada vamos a general el bundle más pequeño posible en base a los cambios y modificaciones que le hicimos al archivo
Nos regresó un bundle un poco más pequeño que el anterior, que en situacione de producción siempre es bienvenido una reducción del tamaño de los archivos
Final
Este es mi primer artículo en Medium y espero que sea de ayuda, si ves un error o algo así. Por favor dime en los comentarios, son bienvenidos.