Este fin de semana se ha lanzado Webpack 4 (nombre clave, Legato), esta es una versión bastante importante, ya que se ha trabajado bastante en el performance y en seguir el concepto de cero configuración #0CJS
“Modern abstract sculpture of metal net structure against white background, San Francisco Museum of Modern Art” by William Bout on Unsplash
Nota: Este contenido lo publiqué primero enmi newsletter, la semana después de publicar el newsletter publico en mi blog, si quieres ser el primero en leer suscríbete.
Veamos algunas de las novedades más importantes.
Novedades
- Es mucho más rápido,** hasta un 98% **esto debido que el desarrollo de esta versión se centro bastante en el rendimiento.
- Sí haz trabajado con webpack conoces el montón de configuración debes realizar, esta versión se centra en el concepto de cero configuración **#0CJS Webpack 4 tiene una funcionalidad llamada mode con dos opciones **development y
production, acá los detalles de cada modo y ahora por defecto en entry point son
src/index.js
y el output endist/main.js
CommonsChuckPlugin
ha sido reemplazado, ahora puedes usar la optimizaciónoptimize.splitChucks
- WebAssembly ahora es soportado por defecto, puedes importar archivos Rust, C++, C
Puedes ver todas las novedades en las notas del lanzamiento
Algunos Plugins aún no se han actualizado, en futuras semanas supongo se lanzarán las versiones que soporten webpack 4 totalmente ya que han habido cambios importante en la forma como se integran los plugins.
Pero creemos un proyecto desde cero y veamos más detalles.
Primer proyecto con Webpack 4 y React
En este ejemplo vamos a crear el setup de un proyecto con React, primero creamos una carpeta del proyectos
mkdir react-webpack4
cd react-webpack4
Inicializamos el package.json
yarn init -y
Ahora vamos a instalar webpack, las instalamos como dependencias de desarrollo.
yarn add -D webpack webpack-cli
Ahora podemos crear un script en el package.json
"scripts": {
"build": "webpack"
}
Sí corremos el comando yarn build
vamos a tener un error, se refiere a que no
puede resolver .src
, esto es porque por defecto busca el archivo ./src/index.js
Crea ese archivo, y coloca algo sencillo cómo:
console.log('prueba')
y ejecuta yarn build
ahora se va a crear el archivo .dist/main.js
en este momento ya tenemos
construido el proyecto, perno nos falta React y definir nuestro entorno de
desarrollo.
Primero modifiquemos un poco los scripts
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
El flag mode va a asignar las optimizaciones para cada entorno.
Para poder usar react debemos añadir babel y el preset babel-preset-react
Instalemos las dependencias necesarias
yarn add -D babel-core babel-loader babel-preset-env babel-preset-react
Veamos cada dependencia
- babel-core: El core que necesitamos para cargar presets
- babel-loader: Es un loader para poder utilizar babel con webpack
- babel-preset-env: Para transpilar características de es6 en adelante
- babel-preset-react: Para transpilar JSX
Ahora debemos decirle a webpack que utilize babel, para esto podemos crear un
archivo webpack.config.js
o podemos utilizar el flag --module-bind js=babel-loader
, en este caso vamos a utilizar el segundo
"scripts": {
"dev": "webpack --mode development --module-bind js=babel- loader",
"build": "webpack --mode production --module-bind js=babel-loader"
}
Ahora ya tenemos listo nuestro setup, podemos crear los archivos de nuestro
proyecto, dentro de ./src/index.js
import React from 'react';
import { render } from 'react-dom';
const Hello = ({ name }) => {
return <h1>hola {name}!</h1>;
};
render(<Hello name="mundo" />, document.getElementById('app'));
Esto va a añadir nuestro componente dentro de un elemento con id app, para esto
debemos crear un html base en ./dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>app</title>
</head>
<body>
<div id="app"></div>
<script src="./main.js" charset="utf-8"></script>
</body>
</html>
Dentro de poco el plugin HtmlWebpackPlugin
tendrá soporte para webpack 4
Necesitamos también un servidor de desarrollo, para esto podemos usar
webpack-dev-server
yarn add -D webpack-dev-server
y modificamos el script de dev
{
"dev": "webpack-dev-server --mode development --module-bind js=babel-loader --content-base ./dist/"
}
Debemos agregar el tag — content-base ./dist/
ya que por ahora el no esta
buscando esa ruta por defecto, en próximas versiones esto no será necesario.
Ahora puedes ejecutar yarn dev
y tendrás tu entorno de desarrollo funcionando
y si decides enviarlo a producción solo debes ejecutar yarn build.
Puedes encontrar el resultado final en este repositorio.
Palabras finales
Las mejoras de rendimiento en el proceso de construcción del proyecto han sido increíbles en está versión y según el equipo de webpack aún hay bastante campo de mejora.
¿Cuál herramienta de build utilizan actualmente?