Webpack — Configurando nuestro entorno

Luis Montero
Sep 3, 2018 · 5 min read

Vamos a configurar nuestro entorno con Webpack.

Iniciar el proyecto

Primero vamos a iniciar nuestro proyecto con yarn, esto creará el package.json

yarn init

Agregando Webpack al proyecto

yarn add webpack webpack-cli --dev

Archivo 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.

webpack.config.js

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

Script: yarn run build:local

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 --dev

Ahora, 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
webpack.config.js

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@next

Ahora debemos cargar nuestro plugin, agregarlo en plugins y cambiar el use para que utilice el plugin.

webpack.config.js
al ejecutar yarn run build:local se ve donde se crea el CSS

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 --dev

Luego en nuestro package.json, debemos agregar el script que ejecuta esta tarea.

yarn run dev

Ahora corremos, y esto nos devuelve donde nuestro proyecto está corriendo

yarn run dev
yarn run dev

Ahora, debemos cambiar la ruta del script de JS para que cargue desde el localhost:8080

index.html dentro de build

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

webpack.config.js

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-plugin

Y lo configuraremos dentro de nuestro webpack.config.js.

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.

localhost:8080

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

webpack.config.js

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 dev

Agregar soporte para SCSS

Para agregar soporte para SCSS, vamos a utilizar otro loader llamado sass-loader.

yarn add sass-loader node-sass --dev
webpack.config.js

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.

index.js
style.scss

Y creamos el style.scss, después ejecutamos

yarn run build

y 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í.

Fuentes

https://github.com/babel/babel-loader

Luis Montero

Written by

Web Developer - in process of improving

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade