Iniciando con Webpack

Webpack es una herramienta de empaquetado de módulos, te permite compilar código javascript empaquetando los distintos archivos que tu aplicación necesita en uno solo, importar y empaquetar otros archivos como imágenes, CSS y HTML, además de minificar tu código entre otras cosas.

Conceptos importantes en Webpack

Antes de continuar, es importante conocer algunos conceptos fundamentales de como webpack funciona internamente...

Punto de entrada

Indica sobre que archivo webpack deberá empezar a construir sus dependencias y generar nuestros bundles. Por defecto el punto de entrada es       /src/index.js    pero no tiene porque ser siempre así y se puede cambiar ( incluso crear varios puntos de entrada) desde el archivo de configuración de webpack.

Punto de salida

Es la ubicación donde webpack deberá colocar el o los bundles generados. Por defecto la salida principal será colocada en   /dist/main.js   y la ubicación  /dist   para cualquier otro archivo generado.

Loaders

Internamente webpack solo logra entender javascript y archivos json. Los loaders le permiten a webpack entender y  así poder procesar otro tipo de archivos para convertirlos en módulos válidos para ser consumidos por nuestra aplicación.

Plugins

Los plugins permiten realizar diferentes tareas, gestión de archivos, variables entre otras cosas.

Modo

Existen dos modos de trabajo de webpack producción o desarrollo. Por defecto el modo de trabajo de webpack es el modo productivo.

¿Qué se necesita para comenzar con Webpack?

Para trabajar con webpack  es necesario tener instalado node y npm.

Primeros pasos con webpack

Como paso inicial desde la raíz de lo que será nuestro proyecto, inicializamos npm, instalamos webpack de manera local seguido de webpack-cli que  es la herramienta que nos ayudará a ejecutar  webpack desde la línea de comandos.


  npm init -y
  npm install webpack webpack-cli --save-dev

Nota: es posible instalar webpack de manera local pero se recomienda instalarlo de manera local en el proyecto actual.

A partir de este punto es posible implementar webpack sin ningún tipo de configuración, bastara con adaptar nuestro proyecto a la configuración por defecto de webpack. Para ello solo con crear dentro de nuestro proyecto una carpeta llamada   src  y dentro  un archivo   index.js  . Hasta este punto nuestro proyecto es algo similar a esto...


proyecto-webpack
|- /node-modules
|- /src
  |- index.js
|- package.json

Ahora ejecutamos el comando webpack de la siguiente manera...


npx webpack

Veremos que nos ha creado una nueva carpeta con un archivo...


proyecto-webpack
+ |- dist
+   |- main.js
  |- /node-modules
  |- /src
    |- index.js
  |- package.json

Después de ejecutar webpack, este ha transpilado el archivo que encontró en el punto de entrada   /src index.js   y creó in punto de salida  /dist     y ahí colocó nuestro bundle   main.js   .

De momento solo se ha visto el punto de entrada y salida de webpack, en proximas entradas veremos el resto de conceptos.