¿Qué es Webpack?

Webpack es un empaquetador de módulos, es decir, te permite generar un archivo único con todos aquellos módulos que necesita tu aplicación para funcionar. Para darte una idea, te permite incluir todos tus archivos javascript .js en un único archivo, incluso se pueden incluir hasta archivos de estilos .css en el mismo archivo, llamado *.bundle.js. Además se puede realizar otras tareas de optimización de los códigos, tales como la minificación y la compresión.

Introducción

Webpack es una herramienta configurable que nos ayudará a realizar algunas tareas básicas en el desarrollo Frontend en tareas automatizadas y preparar nuestra aplicación web para producción.

Antes de entrar de lleno con Webpack, es importante aclarar unos conceptos básicos previos que nos ayudarán a entender mejor cómo funciona esta herramienta:

• Entry Point: Indican a Webpack los archivos de entrada para generar los paquetes o archivos *.bundle.js.
• Output: Indican a Webpack el lugar donde se colocarán los paquetes *.bundle.* que se hayan generado: JavaScript, CSS, HTML, etc.
• Loaders: Son las rutinas que hacen posible que Webpack cargué, transforme y procese todos los archivos o entradas.
• Plugins: Amplían las funcionalidades por defecto que incluye Webpack. Permiten realizar tareas en el…