Configuración de Webpack para Aplicación Web Dinámica

Clase 6 de 23 • Curso de Introducción a Empaquetadores Web

Contenido del curso

Introduccion

Webpack

Parcel

ESBuild

Rollup

Vite

22
Configuración y uso de herramientas de empaquetado en JavaScript
10:02 min

Conclusiones

23
Empaquetadores JavaScript: Ventajas y Desventajas
04:49 min

Tomar examen

Resumen

¿Cómo configurar un entorno de desarrollo con Webpack?

El desarrollo web moderno nos permite crear aplicaciones dinámicas y eficientes. Al trabajar con herramientas como Webpack, es fundamental saber cómo configurar un entorno de desarrollo óptimo. Aquí te mostramos cómo hacerlo de manera sencilla y efectiva.

¿Cuáles son los plugins esenciales para nuestro proyecto?

Para crear una estructura sólida en nuestro proyecto, es necesario utilizar ciertos plugins en Webpack. Estos son imprescindibles:

HTML Webpack Plugin: Permite la generación automática de archivos HTML y es útil para integrar scripts automáticamente.
Copy Webpack Plugin: Facilita la copia de archivos y directorios durante la construcción.
Babel y Babel-loader: Son necesarios para transcribir JavaScript moderno a una versión que sea compatible con la mayoría de los navegadores.

Puedes integrar estos plugins ejecutando el siguiente comando en tu terminal:

npm install --save-dev html-webpack-plugin copy-webpack-plugin @babel/core babel-loader

¿Cómo estructurar el archivo de configuración de Webpack?

Una vez instalados los plugins, puedes proceder a configurar Webpack para que funcione correctamente con tu proyecto. El archivo de configuración se encuentra en la raíz de tu proyecto y tendrá la siguiente estructura básica:

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: './public/index.html',
      filename: 'index.html'
    })
  ]
};

¿Qué aspectos clave debemos considerar en la configuración?

Entry: Define el punto de entrada de tu aplicación. Generalmente se llama index.js y se encuentra dentro de la carpeta src.
Output: Especifica dónde se guardará el archivo resultante. dist suele ser la carpeta estándar para almacenamiento de archivos de distribución.
Resolve: Indica qué extensiones considerará Webpack al importar módulos de JavaScript.
Module Rules: Las reglas de módulos permiten especificar cómo se procesan diferentes tipos de archivos. En este caso, usamos babel-loader para procesar archivos JS modernos.
Plugins: Además de los plugins mencionados, consideramos configuraciones como inject para la inyección automática de scripts al archivo HTML y template para definir el archivo HTML base.

¿Por qué excluir Node Modules?

En la configuración de las reglas del módulo, es importante excluir la carpeta node_modules. Esto se debe a que contiene muchos archivos JavaScript que podrían sobrecargar tu proyecto si los pasas por Babel. Webpack los omitirá para mejorar el rendimiento.

¿Cómo continuar el desarrollo y la preparación para producción?

Una vez configurado, puedes correr tu aplicación en un entorno de desarrollo local o preparar tu proyecto para producción. Esto implicará la creación de un entorno de compilación que Webpack gestionará para optimizar el código.

Continúa experimentando y aprendiendo con Webpack en Platzi, donde encontrarás cursos más detallados sobre cómo sacar el máximo provecho de esta poderosa herramienta. ¡Sigue adelante en tu viaje de desarrollo profesional!

Comentarios

German Cavani

student•

Les dejo los paquetes a instalar 😀

npm i html-webpack-plugin copy-webpack-plugin @babel/core babel-loader - D

Josue Cerron Tuesta

student•

you rock man!

Andre Huaman Yovera

student•

npm i html-webpack-plugin copy-webpack-plugin @babel/core babel-loader -D

Santiago Andres Alvarez Cuadros

student•

Les comparto los conceptos de webpack que pueden encontrar en su documentación oficial .

Conceptos de webpack

Entry

. Un entry point indica qué módulo webpack debería empezar a utilizar para empezar a construir el gráfico de dependencias. . Webpack luego se encargará de verificar qué otros módulos y librerías aquel punto de entrada depende de (directa o indirectamente).

Por defecto, su valor es ./src/index.js, pero se puede especificar otro, o múltiples, punto de entrada:

//webpack.config.js
module.exports = {
	entry: './src/index.js'
}

Output

. La propiedad output le indica a webpack hacia dónde cargar los ‘paquetes’ ya creados y cómo deberían llamarse. Por defecto, los paquetes tendrán el nombre de main.js y se cargarán en la carpeta ./dist:

//webpack.config.js
const path = require('path');

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

path es un módulo de node.js que nos permite manipular los paths de los archivos. .

Loaders

. Por defecto, Webpack solamente entiende archivos .js y .JSON. Los loaders nos permiten especificar otro tipo de archivos para que webpack los pueda procesar y convertir en módulos válidos que pueden ser consumidos por nuestra aplicación y ser añadidos en el gráfico de dependencias. . Los loaders tienen tres propiedades:

test: identifica cuál o cuáles archivos serán transformados.
use: indica cuál loader debería ser utilizado para transformar los archivos.
exclude: indica archivos o carpetas que deberían ser ignoradas por el loader

//webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	modules: {
		rules: [{test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/}]
	}
}

Plugins

. Los plugins son similares a los loaders pero nos permiten hacer cosas que no podríamos con los loaders, como optimización de los paquetes, inyección de variables y manejo de activos.

Para usar plugins, necesitamos traerlos con require() para agregarlos al array de plugins. Como podemos usar un mismo plugin con diferentes configuraciones para distintos propósitos, necesitamos crear instancias de los plugins utilizando el operador new.

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	modules: {
		rules: [{test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/}]
	},
	plugins: [new HtmlWebpackPlugin({ template: './src/index.html'})]
}

Existe una gran cantidad de plugins que webpack nos provee. Acá una lista de plugins .

Mode

. Al colocar la propiedad mode en development, production o none, podemos activar las optimizaciones internas de webpack dependiendo del valor de mode que hayamos especificado. El valor por defecto es production.

N40 M10

student•

Mucha información en poco tiempo estoy mareado!

Federico Ivan Llano

student•

Aca dejo el codigo de la clase por si tienen algun error con typos

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [ 
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html',
        })
    ]
}

Max Andy Diaz Neyra

student•

Iba a dejar el código de la clase pero veo que ya lo hiciste. En su lugar dejo un aporte:

/**@type {import('webpack').Configuration} */
```Coloca esa linea encima de tu module.exports y te va a autocompletar las props de la configuracion. Saludos.

John Byron Alzate Hernández

student•

Este archivo de configuración define las siguientes opciones:

entry: Especifica el archivo de entrada de su aplicación, en este caso ./src/index.js output: Especifica la ruta de salida y el nombre del archivo empaquetado, en este caso el archivo se llama bundle.js y se encuentra en la carpeta /dist module: Especifica las reglas para los módulos, en este caso se establece que todos los archivos .js deben ser procesados por babel-loader y los archivos .css deben ser procesados por style-loader y css-loader plugins: Especifica los plugins a utilizar, en este caso se utiliza HtmlWebpackPlugin para generar un archivo HTML a partir de una plantilla ./src/index.html Ten en cuenta que para que este código funcione, tendrás que tener instaladas las dependencias necesarias, como babel-loader, html-webpack-plugin y css-loader.

Rubén Ernesto Aragón Gil

student•

/ \

alt + 92 = \

German Tellez Vanegas

student•

Muy buena esta clase, me estoy dando cuenta de las abstracciones que hacen los frameworks y nos damos por enterados

Francisco Manuel Sanchez Morales

student•

Les comparto este recurso para que puedan crear sus archivos .gitignore

crean el archivo .gitignore y luego pegan es resultado de la pagina 🤙🏼

Diego Reyes Cabrera

student•

Resolve.extensions

Esta configuración nos permite importar archivos sin especificar su extensión, algo así como:

import func from "./../functions/sayHi";

En verdad el archivo se llama sayHi.js, pero le estoy encargando a Webpack que resuelva la extensión por mí. . Un dato importante es que, Webpack resolverá la primera coincidencia en el array que le pasemos a resolve.extensions. . Por ejemplo, si tenemos estos dos archivos sayHi.css sayHi.js en la misma carpeta; y a resolve.extensions le pasamos el array [.js, .css]; si hacemos un import sin especificar la extension del archivo, como a continuacion:

import file from "./../folder/sayHi";

Webpack nos importará el archivo sayHi.js, dada la configuración de mi ejemplo.

Rodrigo Andre Gutierrez

student•

si tu teclado tiene la tecla de la A chiquita ª al lado del número 1 entonces esa es la de la barra invertida \ ( AltGr + ª )

//webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	modules: {
		rules: [{test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/}]
	}
}

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	modules: {
		rules: [{test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/}]
	},
	plugins: [new HtmlWebpackPlugin({ template: './src/index.html'})]
}

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [ 
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html',
        })
    ]
}

Configuración de Webpack para Aplicación Web Dinámica

Introduccion

Empaquetadores Web: Herramientas y Evolución para Desarrolladores

Módulos y empaquetadores en JavaScript: fundamentos esenciales

Empaquetadores de Módulos en JavaScript: Webpack, Parcel, Sbuild y Más

Empaquetadores de Módulos JavaScript: Webpack y Alternativas

Webpack

Configuración y Uso de Webpack para Proyectos Web