Webpack

> Temas > Webpack
Editar

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

Webpack es una herramienta conocida como "Module Bundler", que sería algo como "empaquetador de módulos" en español. 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 modernas a código soportado por todos los navegadores comunes
  • Convertir el código de los preprocesadores CSS (como Sass) a CSS estándar
  • Minimizar código Javascript, CSS o inlcuso el HTML
  • 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

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

Scripts de npm para ejecutar Webpack

Una vez hemos instalado Webpack y hemos creado el archivo de configuración si fuera necesario, que habitualmente sí lo será, es importante crear los scripts de npm necesarios para lanzar el proceso de trabajo con Webpack.

Estos scripts los creas en el archivo package.json, en la propiedad "scripts". Generalmente crearás dos scripts, uno para ejecutar Webpack en modo desarrollo y otro para ejecutar en modo producción.

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
},

Luego, invocarás estos scrips con "npm run" seguido del nombre del script que quieras lanzar. En el caso del modo de producción sería el comando.

npm run build

Para modo de desarrollo ejecutaremos:

npm run dev

Editar

HTML Webpack Plugin

HTML Webpack Plugin es uno de los plugins más usados de Webpack. Sirve para generar un archivo HTML donde se inyectará el script Javascript creado por Webpack. Es decir, usando HTML Webpack Plugin, al hacer el proceso de bundelización, se creará también como salida un archivo .html que tendrá una etiqueta <script> con el archivo de JS compilado.

Para usar HTML Webpack Plugin tenemos que instalarlo aparte.

npm install html-webpack-plugin --save-dev

Posteriormente lo tenemos que usar en el archivo webpack.config.js, importando con el require y declarando el plugin en el array de plugins.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            hash: true,
        })
    ]
}

Encuentra más información en el artículo de HTML Webpack Plugin.

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 de Webpack

Se han recibido 2 faqs en Webpack

Hacer una pregunta