Webpack

> Temas > Webpack
Editar

Webpack es uno de las herramientas más comunes para el desarrollo y producción de proyectos Javascript, encargado entre otras cosas de producir los bundles a partir del código frontend.

Webpack es una herramienta conocida como "Module Bundler". De hecho es la más popular de las herramientas existentes en el ecosistema de los empaquetadores de código, siendo otras alternativas Rollup, Gulp, Snowpack, etc.

Se trata de un software capaz de crear los bundles de código Javascript, es decir, los paquetes de código necesarios para poder llevar a producción un proyecto frontend, realizando la transpilación del código y el empaquetado de los módulos en uno o varios archivos compactados, minimizados y por tanto optimizados.

Además de crear los bundles, Webpack es capaz de realizar diversas tareas necesarias para la etapa de desarrollo del proyecto, como convertir el código de Javascript en versiones actuales a código soportado por todos los navegadores comunes, convertir el código de los preprocesadores CSS (como Sass) a CSS estándar, optimizar imágenes, crear y levantar un servidor de desarrollo para ejecutar el proyecto durante su construcción, etc. Para todo ello Webpack se organiza en torno a un módulo central que se puede expandir con una serie de plugins, que se escogerán dependiendo de las necesidades del sitio web que se está desarrollando.

Webpack es un software libre que se puede usar de manera gratuita en cualquier proyecto. Su sitio web es https://webpack.js.org/

Más información:

Webpack

Manuales

Manual de Webpack
Este es el manual de Webpack, la herramienta más importante para el desarrollo frontend moderno. Webpack es originalmente un empaquetador...

Instalar Webpack

Antes de instalar Webpack es necesario comprobar si tenemos NodeJS instalado en el sistema.

Desde Webpack 4 no es necesario instalar Webpack en un proyecto para hacerlo funcionar, sin embargo, en la práctica es casi imprescindible, ya que cada lugar donde quieras usar Webpack tiene unas características y por ello normalmente lo vas a necesitar configurar.

Para instalar Webpack lo normal es hacerlo en el proyecto en concreto donde se deba usar, pudiendo tener una versión de Webpack, dependencias y configuraciones de manera independiente.

En Webpack 5 puedes instalar el software en el proyecto con los comandos siguientes comandos:

Entramos en el directorio del proyecto.

cd carpeta-del-proyecto

Por supuesto, el proyecto necesita haberse iniciado con npm, es decir, requiere contener ya el archivo package.json. Si no está el archivo package.json, dentro de la carpeta del proyecto hay que hacer este comando:

npm init -y

Luego instalamos los paquetes mínimos para trabajar con Webpack.

npm install webpack webpack-cli --save-dev

Editar

Usar Webpack sin configuración

A partir de Webpack 4 podemos usar Webpack sin requerir ningún archivo de configuración. Para ello debemos adaptarnos a la convención, creando una estructura con la carpeta "src" y dentro un archivo "index.js".

src
|
|--index.js

Entonces lanzamos el comando siguiente:

npx webpack

Esto producirá la compilación del archivo index.js y colocará el compilado en la carpeta "dist". Acabaremos con dos directorios, el "src" con el archivo original y el directorio "dist" con el archivo resultante de la compilación.

Editar

Configuración de Webpack en webpack.config.js

El archivo webpack.config.js sirve para indicar la configuración que deseamos aplicar en la ejecución de Webpack. Si queremos modificar el modo con el que Webpack se ejecuta y prepara los assets de la aplicación, necesitamos crear el archivo en la raíz del proyecto, en la misma carpeta donde está el package.json.

Básicamente en este archivo tenemos que indicar, mediante código Javascript que se ejecutará en la plataforma NodeJS, un objeto de configuración con una serie de propiedades opcionales. Cada propiedad que indiquemos sobreescribirá la configuración predeterminada del proceso de ejecución de Webpack.

El código básico con el que podemos comenzar a usar el Webpack config incluye dos propiedades:

  • input, que indica dónde está el Javascript que da inicio a la aplicación. Es el archivo que importa todos los demás módulos Javascript que componen el código del proyecto.
  • output, que es la carpeta donde deseamos que Webpack coloque los archivos resultado de su ejecución.

Un ejemplo de webpack.config.js lo podemos ver a continuación:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Podemos encontrar más información en este artículo sobre webpack.config.js, o por supuesto en la documentación de Webpack.

Editar

¿Quieres añadir algo sobre Webpack?

Crea artículos, recursos o comparte información sobre Webpack

Crear un bloque

Temas relacionados

Preguntas y respuestas

Se han recibido 2 faqs en Webpack

Hacer una pregunta