Webpack — Configurando nuestro entorno
Vamos a configurar nuestro entorno con Webpack.
Iniciar el proyecto
Primero vamos a iniciar nuestro proyecto con yarn, esto creará el package.json
yarn initAgregando Webpack al proyecto
yarn add webpack webpack-cli --devArchivo de configuración
Ahora debemos crear un archivo llamado webpack.config.js, este tendrá la configuración de Webpack, exportándolo con commonJS. Aquí configuramos nuestro punto de entrada con la ruta exacta, y nuestro punto de salida para el bundle final.

Ahora se crea un script, para ejecutar Webpack dentro del package.json

Al correr en consola el siguiente comando, podemos ver que se crea nuestro primer bundle, en la carpeta dist.
yarn run build:local
Loaders
Como decíamos en el artículo pasado.
Por defecto Webpack solo entiende Javascript, los loaders nos permiten cargar otro tipo de archivos para que puedan ser consumidos por la aplicación. Por ejemplo cargar imágenes.
Por lo cuál hay que configurar para que pueda cargar otro tipo de archivos, en este caso lo haremos para CSS.
Los loader no vienen predefinidos, por lo cual vamos a instalar los que necesitamos.
yarn add style-loader css-loader --devAhora, cargamos los loader, se hace dentro de rules, y hay dos cosas importantes:
- Test: Acá le decimos con una expresión regular, el tipo de archivo que queremos trabajar
- Use: Acá le decimos que loader utilizar

Si hacemos esto, en el JS podemos leer el CSS.(acá yo cree un style.css) y luego lo cargo dentro del index.js
import './style.css';console.log('hello');
Esto nos agrega los estilos pero dentro del mismo index.html, para agregar los estilos en un archivo externo, debemos cargar un plugin que nos extraiga ese CSS y lo agregue al proyecto como un archivo.
yarn add extract-text-webpack-plugin@nextAhora debemos cargar nuestro plugin, agregarlo en plugins y cambiar el use para que utilice el plugin.


Webpack dev server
Cada vez que hacemos un cambio, tenemos que volver a correr la tarea, lo ideal sería que si se hace un cambio se genere el build automáticamente.
yarn add webpack-dev-server --devLuego en nuestro package.json, debemos agregar el script que ejecuta esta tarea.

Ahora corremos, y esto nos devuelve donde nuestro proyecto está corriendo
yarn run dev
Ahora, debemos cambiar la ruta del script de JS para que cargue desde el localhost:8080

Para evitar hacer eso, una mejor solución sería configurar nuestro dev server, para que apunte a nuestro folder de dist

Ahora nuestro index.html lo hemos generado manualmente en el dist, sería ideal si nuestro Webpack lo generará automáticamente. Para ellos instalaremos un plugin llamado html-webpack-plugin
yarn add --dev html-webpack-pluginY lo configuraremos dentro de nuestro webpack.config.js.

En la línea 3 del código anterior, requerimos el plugin y en la 28 lo ejecutamos. y si ejecutamos de nuevo yarn run build:local, podemos ver que levanta el servidor, y si hacemos cambios lo actualiza.

Agregar soporte Es6 con Babel
Para soportar Es6, debemos instalar un loader Babel-loder
yarn add -D babel-loader @babel/core @babel/preset-env y ahora debemos agregar la configuración del loader a nuestro webpack config

Ahora si dentro de nuestros archivos Js podemos utilizar sin ningún problema ES6, ya que Babel se encargará de transpilar el código para que sea compatible con los navegadores que no tienen ese soporte aún.
yarn run devAgregar soporte para SCSS
Para agregar soporte para SCSS, vamos a utilizar otro loader llamado sass-loader.
yarn add sass-loader node-sass --dev
En la imagen de arriba, agregamos la configuración del loader para soportar SCSS, y ahora en nuestro index.js, vamos a cargar el scss.


Y creamos el style.scss, después ejecutamos
yarn run buildy como podemos ver el build se ha completado perfectamente.

Ya con esto tenemos nuestro set up con Webpack, puedes visitar el repositorio del proyecto aquí.
