Hace unos meses salió la versión 4 de webpack la cual ha traído unas series de optimizaciones para agilizar el flujo de desarrollo. Mejoras masivas de rendimiento, cero configuraciones para pequeñas aplicaciones y valores predeterminados.
Veamos un poco más a detalle lo nuevo.
Webpack 4: Cero configuración.
Si has trabajado con la versión anterior de webpack estarás acostumbrado a crear un archivo de configuración llamado webpack.config.js. En esta nueva versión de webpack no es necesario definir un entry point en un archivo de configuración.
Solo tienes que crear una carpeta en la raíz llamada src y dentro crear el archivo index.js. Aunque para configuraciones más avanzadas necesitaras un archivo webpack.config.js.
Probemos de que se trata.
Abre la terminal y crea una nueva carpeta llamada webpack_4
mkdir webpack_4
Dentro de ella ejecuta el siguiente comando npm para crear el package.json
npm init -y
Ahora debes instalar webpack y webpack cli que vienen por separado para esta versión 4.
npm install webpack webpack-cli -D
Abre tu package.json y agrega la siguiente tarea al script npm
"scripts": {
"build": "webpack"
}
Ejecuta la tarea con
npm run build
Obtendrás como salida
ERRORin Entry modulenot found: Error: Can't resolve './src' in '~/webpack_4'
¿Qué ha sucedido? Recuerda que se debe crear la carpeta src en la raíz de del proyecto y dentro creamos nuestro archivo de entry point index.js.
Muy bien ahora agrega en el index.js lo siguiente
console.log(‘Iniciando con webpack 4sin archivo config’)
Corre el comando nuevamente
npm run build
Automáticamente sea generado el bundle en ~/webpack_4 /dist/main.js
Eso es genial!
En webpack 4 no es necesario definir un entry point, ni el output para el archivo de salida y no solo eso si abrimos el main.js en nuestro editor de código veras que también esta minificado, Webpack lo hizo por nosotros.
Webpack 4: Modo de producción y desarrollo.
Tener dos configuraciones diferentes para producción y desarrollo es muy común en el flujo de trabajo con webpack. Por esta razón webpack 4 introduce el flag de –mode que recibe el valor de production y development.
De hecho, si prestaste atención a la salida del último npm run build, verás una advertencia como esta:
La opción ‘modo’ no se ha configurado. Establezca la opción ‘modo’ en ‘desarrollo’ o ‘producción’ para habilitar los valores predeterminados para este entorno.
Muy bien vamos a configurarlo.
Dirígete de nuevo a tu package.json y agrega lo siguiente.
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
Con esto definimos dos tareas distintas una para desarrollo y otra para producción.
Ejecuta la tarea para desarrollo en la terminal
npm run dev
Si verificas en ./dist/main.js. Se creó el bundle para desarrollo y si lo abres observa que no esta minificado. Webpack esta optimizado para el entorno desarrollo.
Ahora prueba ejecutando
npm run build
Echa un vistazo a ./dist/main.js. ¿Qué ves ahora? ¡Un paquete minificado!
Debido al –mode flag que se definió con el valor production webpack crea un bundle para el entorno de producción minificando el código generado.
El modo de desarrollo está optimizado para la velocidad y no hace más que proporcionar un paquete no minificado.
El modo de producción permite todo tipo de optimizaciones desde el primer momento. Pensadas para el ambiente final de nuestro aplicación.
Por defecto el –mode flag esta seteado en production. Así que utilizas el comando webpack –p el –mode flag tendrá el valor de production.
¡Con webpack 4 puedes vivir sin una sola línea de configuración!
¡Simplemente hay que definir el –mode flag en nuestro package.json!
Webpack 4: Sobrescribiendo defaults entry / output
Para configuraciones más custom en las que necesitamos especificar un path para nuestro entry y output distintos a lo que nos ofrece webpack by default. Podemos hacerlo fácilmente en nuestra tarea npm dentro del package.json.
Por ejemplo.
"scripts": {
"dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/dist/js/main.js",
"build": "webpack --mode production ./foo/src/js/index.js --output ./foo/dist/js/main.js"
}
Se le indicara a webpack que el entry point se encuentra en el path ./foo/src/js/index.js luego con el **flag –output ** definimos el path de salida donde se creara el bundle ./foo/dist/js/main.js. Ten presente que el path se coloca tomando como referencia que el comando se ejecuta en la raíz del sitio. Por lo que foo está situada en la raíz.
Webpack 4: Transpilando ES6 con Babel
Todo el Javascript moderno está escrito principalmente en ES6, sin embargo no todos los navegadores lo admiten, solo las versiones recientes saben cómo entenderlo. Entonces tenemos que transpilar el código ES6 al código ES5.
Webpack no sabe cómo realizar la transformación, por lo que necesita de loaders para realizar el trabajo.
Los loaders permitirán soportar multiples tipos de archivos dentro de nuestro javascript
babel-loader es un loader de webpack para transpilar ES6 y superior, hasta ES5. Entonces, vamos a instalar las dependencias.
Para comenzar a usar el loader, necesitaras instalar un conjunto de dependencias. En particular:
-
babel-loader: El cual le enseña a babel como trabajar con webpack, porque babel también trabaja con otros sistemas.
-
babel-core: Conoce como tomar el código, parsearlo, y generar algunos archivos de salida, este core no tiene idea de cómo cambiar la sintaxis de ES6 a ES5.
-
babel-preset-env: Contiene las reglas para decirle a babel exactamente que piezas de la sintaxis de ES5 / 6 y 7 mirar y como deberán ser transformadas a código ES5.
Necesitas instalarlas como dependencias de desarrollo.
npm i babel-core babel-loader babel-preset-env --save-dev
Luego configurar babel creando un nuevo archivo en la raíz llamado .babelrc este es un archivo de configuración de babel para transplilar el código
{
"presets": [ "env" ]
}
En este punto tienes 2 opciones para configurar babel-loader:
-
Usando un archivo de configuración.
-
Utilizando –module-bind en tus scripts npm.
Al principio de este contenido se hacía mención a que webpack 4 era una herramienta de cero configuración.
El concepto de cero configuración se aplica a:
Los entry point: Por defecto deben estar en ./src/index.js
El output: Por defecto será en ./dist/main.js
Production y development mode: No es necesario crear dos configuraciones separadas para producción y desarrollo.
Pero para usar los loaders en webpack 4, se debe crear un archivo de configuración.
Webpack 4: Configurando babel-loader en el archivo de configuración
Debes crear el archivo denominado webpack.config.js para configurar el babel-loader.
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
}
En esta parte ten en cuenta que estas usando la configuración por defecto para el entry point.
Ahora abre el ./src/index.js y agrega algo de ES6:
let myArrowFunction = () => {
console.log("Estoy usando una arrow Function de ES6..!");
}
Crea el bundle
npm run dev
Observa que se ejecuta la tarea en modo development por lo que no sea minifica el archivo de salida y podrás observar más fácil en el ./dist/main.js el código transpilado.
El otro método para configurar loaders en webpack es usando el –module-bindflag. El cual permite especificar loaders desde la línea de comando. Esta opción está presente desde webpack 3 no es exclusiva de le versión 4.
Para usar babel-loader sin un archivo de configuración, configura tus scripts npm en package.json así:
"scripts": {
"dev": "webpack --mode development --module-bind js=babel-loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}
Y estás listo para crear el bundle.
Esta quizás no sea la mejor manera para configurar loaders sin embargo es interesante y puede ser de utilidad según el contexto que se aplique.
Webpack 4 se volcó a la optimización, permitiendo el desarrollo rápido para pequeñas aplicaciones, se incluyen valores por defecto con el fin de eliminar la necesidad de agregar configuraciones extras para agilizar el desarrollo de proyectos pequeños.
El modo de producción y desarrollo creado para separar las configuraciones sin la necesidad de crear archivos separados.
Para el caso de los loaders como se mostro en el ejemplo aun se configuran de misma manera. Aunque se espera que tal vez en alguna actualización de la 4.x o 5.0 pueda cambiar.
Hasta aquí dejo este tutorial, muchas gracias por leerlo. Ha sido el primero que escribo. Así que estoy muy emocionado. Cualquier error que haiga cometido háganlo saber.
El Curso de Webpack de Platzi esta genial así que no lo pienses más. Comienza si aun no lo has hecho, @leonidasesteban te está esperando con excelentes explicaciones.
Le dejo link de el repo con las configuraciones realizadas en el tutorial y las fuentes de la cual obtuve la información.
Webpack 4 Tutorial With Example From Scratch
Curso de Webpack 2017
