como usar webpack

Aprende cómo usar Webpack con pasos prácticos antes de empezar

Continuamos nuestros artículos prácticos sobre cómo usar Webpack, una herramienta para desarrolladores frontent que nos permite  paquetizar los diferentes módulos de los que se compone nuestro proyecto web, como veíamos recientemente. Si hace unos días veíamos la instalación y explicábamos su funcionamiento en ¿Qué es Webpack, cómo funciona y cómo instalarlo?, en este tutorial nos centramos en los primeros pasos que nos permitirán trabajar con este utilísimo software Open Source.

Ejecutar Webpack

Una vez que hemos comprobado que Webpack se ha instalado correctamente, siguiendo los pasos descrito en nuestro artículo anterior, llega el momento de utilizarlo, ya que no es necesario tenerlo configurado para comenzar a trabajar con él.

Para lanzar el proceso de ejecución en nuestro proyecto, bastará con invocar el comando de consola webpack.

webpack

Al hacerlo de este modo, el comando devolverá errores, ya que no contamos con la estructura de proyecto que se espera de manera predeterminada, tal y como vemos en esta imagen:

Ejecutar Webpack

Dentro de las informaciones obtenidas, destacan dos especialmente por su importancia:

  • El mensaje de advertencia de amarillo: WARNING in configuration The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.... Esto sucede porque en Webpack 4 existen dos modos de ejecución: el modo de producción y el modo de desarrollo, ya que las tareas y resultados del sistema en cada uno de ellos es diferente. Este aviso aparece porque todavía no hemos configurado ninguno de los dos modos.
  • Por otra parte, encontramos dos mensajes en rojo que nos indican que no es posible resolver la carpeta donde se encuentra el punto de inicio, que es donde debería comenzar a leer el JavaScript. Según Webpack, debería de existir una carpeta src donde estaría el JavaScript en un archivo index.js. Esto lo vemos tanto en la parte superior donde pone Insufficient number of arguments… y en la inferior donde indica ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in…

Con estas importantes informaciones, podemos optar por dos alternativas. Por un lado, podemos empezar a configurar Webpack en el archivo webpack.config.js; de este modo haremos que pueda trabajar adaptándose a nuestro proyecto. Por otro lado, tenemos la opción de adaptar nuestro proyecto a Webpack con el fin de que encuentre cada cosa donde se espera que esté.

Vamos a optar por adaptarnos primero nosotros a Webpack para, posteriormente, estudiar el archivo de configuración con el fin de que Webpack trabaje según nuestras necesidades.

Modos de desarrollo y producción

Como comentábamos antes, Webpack puede ser ejecutado de dos modos diferentes, siempre dependiendo del modo en que queramos que realice el empaquetado de nuestros archivos. Podemos ejecutar Webpack en modo desarrollo o developement y en modo de producción o production.

Si necesitamos indicar a Webpack en qué modo estamos trabajando, lo hacemos mediante el comando webpack.

Para ejecutar Webpack en modo de desarrollo utilizaremos el comando:

webpack --mode development

Para ejecutarlo en modo de producción emplearemos el comando:

webpack --mode production

Puede resultar práctico crear los scripts en el archivo package.json con el fin de guardar los comandos de ejecución de Webpack que nos interesen.

Configuración inicial de los puntos de inicio y salida predeterminados

  • Punto de inicio predeterminado. En el caso de que no proveamos a Webpack de archivo de configuración webpack.config.js, éste interpreta que el punto de inicio predeterminado para JavaScript es /src/index.js, y comenzará a leer todo nuestro JavaScript desde ese archivo, generando un paquete con todo el código JavaScript que necesite.
  • Punto de salida predeterminado. Para JavaScript el archivo “dist/main.js” es el punto de salida predeterminado de Webpack, dentro del cual se coloca el bundle que contiene todo nuestro código.

Podemos considerar esto como una configuración inicial, que no necesariamente ha de adaptarse a nuestro proyecto actual o a nuestras necesidades o preferencias a la hora de desarrollarlo, ya que siempre tenemos la posibilidad de modificarla más adelante.

No obstante, seguiremos utilizando esta configuración para adaptarnos a Webpack y que encuentre todo donde lo necesita. Para ello, crearemos la carpeta src colgada de la raíz de nuestro proyecto, en la que colocaremos un archivo index.js al que añadiremos algo de código que podamos reconocer posteriormente con facilidad.

Llegados a este punto, ejecutaremos nuevamente Webpack para que nos devuelva una salida diferente. Podemos elegir el modo de producción o de desarrollo, en cualquiera de los dos podemos ver cómo se crean la carpeta y los archivos de destino:

webpack --mode production

Una vez ejecutado, aparece el archivo main.js dentro de una carpeta dist.

Si nos fijamos en la consola, ya no aparece ningún tipo de error o advertencia, por lo que ya podemos empezar a trabajar con Webpack sin más configuraciones previas por nuestra parte.

Para comprobar las transformaciones en el código JavaScript, podemos observar el resultado del archivo main.js. Dentro de tanto código, encontraremos el código fácilmente reconocible que habíamos escribo antes en el index.js. ¡El código restante que aparece es necesario para que Webpack funcione adecuadamente! Y, si prestamos atención al código generado en el modo de producción, podremos ver el código que habíamos introducido anteriormente en el index.js.

Antes de empezar a trabajar con Webpack, también tendremos que ajustar algunos aspectos de su configuración inicial por defecto a través del fichero webpack.config.js. ¡En próximos artículos te explicamos cómo hacerlo!

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
Gratis
Consigue tu backup ahora