REACTJS / WEBPACK | EL BUNDLE
Crea tu bundle
Vamos a explicar cómo haciendo uso de Webpack crear nuestro web bundle de React.
El proyecto lo podéis descargar
¿Qué necesitamos?
Utilizando npm podemos instalar fácilmente todo lo necesario
npm install webpack webpack-cli webpack-dev-server
- webpack: Es el nucleo del module bundler.
- webpack-cli: Es la interfaz de línea de comandos.
- webpack-dev-server: Nos proporciona un servidor de desarrollo con recarga en tiempo real, muy útil durante el desarrollo de la aplicación.
npm install html-webpack-plugin
- html-webpack-plugin: Plugin the webpack que simplifica la creación de ficheros html para servir los bundles creados por webpack.
npm install babel-core babel-loader
- babel-core: Transpilador de JavaScript necesario para convertir nuestro código ECMAScript 2015+ en código compatible para los navegadores actuales.
- babel-loader: Plugin the webpack que hace uso de babel para transpilar el código.
npm install react react-dom
- React: Librería react para la construcción de interfaces de usuario.
- React-dom: Librería que proporciona una interfaza entre react y el DOM (Document Object Model).
npm install babel-preset-react
- babel-preset-react: Para realizar la transpilación de React.
Estos son los paquetes que tenemos que instalar y tendremos todo lo necesario para empaquetar nuestra primera aplicación React con Webpack.
Configuración
Lo primero vamos a definir nuestros scripts para usarlos con npm para hacer las builds y también para arrancar nuestro servidor de desarrollo, para ello ponemos lo siguiente en el fichero packages.json
Con estos dos scripts sólo tenemos que ejecutar en la consola
npm run build-productionY npm lanzará el comando de webpack que hará que nos genere nuestro web bundle listo para ser usado en nuestro servidor de producción. Por el contrario ejecutando
npm run build-developmentLanzaremos nuestro servidor de desarrollo donde tendremos recarga automática cuando hagamos algún cambio en el código.
Ya tenemos nuestro entorno listo para la ejecución de webpack, ahora vamos a ver cómo lo hemos configurado. Para ello vamos a ver el fichero webpack.config.js paso a paso.
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');Cargamos los módulos necesarios, en este caso hacemos uso de path y de html-webpack-plugin. Con path que nos proporciona utilidades para trabajar con rutas y ficheros, aunque podemos no usarlo. Y html-webpack-plugin ya lo conocemos.
Línea 2: Indicamos el punto de entrada (entry point) donde decimos que módulo debe utilizar Webpack para comenzar a construir su grafo de dependencias interno. Webpack se encargará a partir de este punto de entrada de obtener los demás módulos y librerías de los cuales depende.
Línea 3: Indicamos donde queremos que Webpack deje los bundles y que nombre queremos que tengan. En este caso estamos indicando que como salida cree un fichero JavaScript de nombre bundle.js y los deje en el directorio dist.
Línea 7–22: En estas líneas vamos a definir el uso de un Loader. Un Loader se encarga de realizar transformaciones al código fuente de un módulo. En nuestro caso necesitamos realizar la transpilación de código React a código JavaScript compatible con los navegadores, para ello necesitamos hacer uso del loader de babel, babel-loader.
La definición es sencilla, mediante el uso de test le indicamos a Webpack los ficheros que debe buscar mediante una expresión regular
/*\.jsx?$/Todos los ficheros que terminen en .js o .jsx debe aplicarles el loader.
Mediante exclude evitamos los directorios que no queremos que busque dichos ficheros.
Ahora definimos el/los loaders que vamos a utilizar, con use le decimos que para los ficheros que haya encontrado aplique el loader, en este caso babel-loader, el cual configuramos para React mediante las opciones (options) indicando el preset react.
Línea 23: Indicamos las extensiones que queremos que Webpack utilice para resolver la importación de módulos. Por ejemplo, en nuestro fichero main.js
Estamos importando mediante require el componente hello mediante nuestra definición de resolve, Webpack buscará un fichero llamado hello.js o hello.jsx para resolver la dependencia. En nuestro ejemplo encontrará hello.jsx.
Línea 26: Vamos a cargar el plugin html-webpack-plugin configurando una plantilla para el fichero index que queremos que nos genere insertando automáticamente la carga del bundle.js generado por Webpack. Le indicamos un template mediante la ruta donde se encuentra. Su contenido es el siguiente
Como vemos es una plantilla sencilla, donde después de la ejecución del plugin, tendremos generado en el directorio dist un fichero index.html (lo indicamos mediante filename) que tendrá añadido lo necesario para cargar el bundle.js.
Y por último en la línea 32 añadimos un parámetro de configuración de nuestro servidor de desarrollo, para que no haga una comprobación del host (el uso de esta opción porque puede provocar un riesgo de seguridad, sólo utilizarla en entornos controlados y únicamente para desarrollo).
Conclusión
Terminamos este breve tutorial de cómo hacer uso de Webpack para generar un bundle de una aplicación que utilizar React. Además del uso del plugin de generación para ficheros .html y el uso del servidor para desarrollo proporcionado por Webpack.
También se ha mostrado la definición de dos pequeños scripts para lanzar Webpack utilizando npm.
