Configuración básica de Webpack para proyectos JavaScript

Resumen

¿Cómo configurar webpack en tu proyecto?

Para cualquier desarrollador moderno, configurar el entorno de trabajo de una aplicación es crucial. Aquí exploraremos la configuración básica de webpack, una herramienta esencial para crear aplicaciones web eficientes y modulares. Aprenderás cómo comenzar a estructurar un archivo webpack.config.js para gestionar la entrada, salida y extensiones de tu proyecto.

¿Cómo crear el archivo de configuración de webpack?

Empieza creando tu archivo de configuración. Coloca este archivo en la raíz de tu proyecto y llámalo webpack.config.js. Este archivo se convertirá en tu recurso principal para definir la configuración que tu proyecto necesita.

const path = require('path');

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

¿Qué elementos se deben configurar inicialmente?

Entrada (entry): Se refiere al punto de inicio de tu aplicación. Generalmente, es el archivo index.js en tu directorio src.
Salida (output): Determina el destino de la compilación final. Convencionalmente, webpack genera los archivos en una carpeta llamada dist, abreviatura de "distribution". Puedes dar nombres específicos a los archivos compilados, como main.js o bundle.js.
Resolución (resolve): Aquí defines las extensiones de archivos que webpack debe manejar. Comúnmente, se incluyen extensiones como .js, y si trabajas con frameworks como Svelte o React, configuraciones adicionales podrían ser necesarias.

¿Cómo ejecutar webpack con la configuración establecida?

Una vez configurado, verifica que no existan errores de tipo (typos) en el archivo webpack.config.js y ejecuta el siguiente comando en tu terminal para compilar el proyecto:

npx webpack --mode production --config webpack.config.js

Como alternativa, puedes simplificar la ejecución creando un script en tu archivo package.json:

"scripts": {
  "build": "webpack --mode production"
}

Así, podrás ejecutar webpack con el comando npm run build, omitiendo la necesidad de especificar el archivo de configuración siempre que esté en la raíz del proyecto.

¿Qué más se puede añadir?

Una vez configurada la estructura básica, tu proyecto debería generar una carpeta dist con el archivo main.js. A medida que desarrolles, será necesario introducir configuraciones adicionales para manejar CSS, HTML, y posiblemente otros tipos de archivos dependiendo de los requerimientos de tu proyecto. La optimización y adición de nuevas propiedades en el archivo de configuración son una parte continua del trabajo con webpack.

Para la próxima etapa de optimización con Babel, prepararemos el terreno para mejorar el manejo del código JavaScript. Sigue trabajando en el fortalecimiento de tu proyecto, y recuerda: cada paso hacia una mejor configuración es un paso hacia aplicaciones más robustas y eficientes. ¡Sigue explorando y ampliando tus conocimientos en desarrollo web!

Juan Carlos Valencia López

student•

Si queremos añadir el autocompletado para nuestro archivo de webpack, podemos añadir el siguiente código antes del module.exports

/** @type {import('webpack').Configuration} */

Fernando Quinteros Gutierrez

student•

👏 Interesante aporte!

Carlos Mario

student•

no me funciona, como lo tengo que hacer?

Fernando Quinteros Gutierrez

student•

⚙️ Configuración de webpack.config.js

Apuntes

El archivo de configuración nos va ayudar a poder establecer la configuración y elementos que vamos a utilizar
Para poder crear el archivo de configuración en la raíz del proyecto creamos un archivo llamado webpack.config.js
En el mismo debemos decir
- El punto de entrada
- Hacia a donde a enviar la configuración de nuestro proyecto
- Las extensiones que vamos usar

const path = require('path');

module.exports = {
  // Entry nos permite decir el punto de entrada de nuestra aplicación
  entry: "./src/index.js",
  // Output nos permite decir hacia dónde va enviar lo que va a preparar webpacks
  output: {
    // path es donde estará la carpeta donde se guardará los archivos
    // Con path.resolve podemos decir dónde va estar la carpeta y la ubicación del mismo
    path: path.resolve(__dirname, "dist"),
    // filename le pone el nombre al archivo final
    filename: "main.js"
  },
  resolve: {
    // Aqui ponemos las extensiones que tendremos en nuestro proyecto para webpack los lea
    extensions: [".js"]
  },
}

El flag —config indica donde estará nuestro archivo de configuración

npx webpack --mode production --config webpack.config.js

Para poder hacerlo más amigable el comando puedes crear un script en package.json

"scripts": {
		...
    "build": "webpack --mode production --config webpack.config.js"
  },

RESUMEN: Puedes crear un archivo webpack.config.js en el cual estarán las configuraciones con las cuales webpack trabajara, entre ellas están los puntos de entrada y salida, extensiones de archivos, entre otras características que se verán próximamente en él curso.

Matías Wasiak

student•

Gracias por el aporte!

David Alejandro García Graterón

student•

Gracias por el aporte a la comunidad. Lo estaré leyendo y poniendo en mi apunto. Saludos!

Omar Maldonado Villanueva

student•

actualmente no es necesario añadir el flag --config webpack.config.js ya que es el archivo que detecta por defecto, entonces basta con hacer npx webpack --mode production

NEXU QUISPE HUAMAN

student•

GRACIAS MAN ME SALVASTE, UNA HORA SIN SABER QUE HABIA PASADO. HOY 2021 SIRVEEEEE PARA WINDOWS WSL.

Rubén Ernesto Aragón Gil

student•

Gracias, bro.

Santiago Naranjo Conde

student•

Para el que tenga dudas similares a las mias:

require("path") ++require++ es una forma de importar módulos en node. ++path++ es un objeto o clase que viene por defecto en node. Viene con varios métodos que podemos usar https://nodejs.org/api/path.html
__dirname dirname lo incluye node también. Imprime el directorio actual en el que esta funcionando el proyecto de node, por ejemplo si usas node en /Tupc/fulanito/proyectos. Lo usamos porque si subimos este código a un servidor en la nube, el directorio en el que vamos a trabajar en esa máquina en la nube va a ser diferente al de nuestro pc https://nodejs.org/docs/latest/api/modules.html#__dirname
path.resolve() Es un método de path. Sirve simplemente para concatenar direcciones. Si usamos path.resolve("/mipc", "/fulanito"), el resultado sería /mipc/fulanito https://nodejs.org/api/path.html#pathresolvepaths

Rony Porraz Vargas

student•

webpack.config.js Este archivo es donde se controla toda la configuración de webpack, de modo que podamos darle un comportamiento personalizado de acuerdo a nuestras necesidades. Este archivo debe estar en la raíz de nuestro proyecto al nivel del package.json pero también podemos colocarlo en otra ruta pero eso es another history .

El archivo tiene que realizar una exportación de un objeto JavaScript que contendrá la configuración de webpack

const path = require('path'); // Para trabajar con archivos y rutas de directorios

module.exports = {
    mode: 'production', // le pasamos explicitamente el modo desde el archivo
    entry: './src/index.js', // el punto de entrada de mi aplicación
    output: { // Esta es la salida de mi bundle
        path: path.resolve(__dirname, 'public_html/js'),
        // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
        // para no tener conflictos entre Linux, Windows, etc
        filename: 'main.js', 
        // EL NOMBRE DEL ARCHIVO FINAL,
    },
    resolve: {
        extensions: ['.js'] // LOS ARCHIVOS QUE WEBPACK VA A LEER
    }
}

Y por ultimo

npx webpack --config webpack.config.js

Usuario anónimo

user•

Gracias, no terminaba de enternder el método resolve().

Lucas Aristizábal

student•

me quedó un poco más claro gracias

María Sierra

student•

Configuración de webpack.config.js

Vamos a crear en el directorio principal del proyecto, un archivo llamado webpack.config.js

const path = require('path')

module.exports = {
    /* Aquí indicamos el elemento inicial de nuestra app.
    O sea, nuestro punto de entrada */
    entry: './src/index.js',

    /* Ahora indicamos cual va a ser el archivo de salida,
    donde va a estar todo el código que compile */
    output: {
        /* Aquí indicamos donde queremos que se guarde el proyecto */
        path: path.resolve(__dirname, 'dist'),
        /* Y colocamos el nombre del .js que va guardar */
        filename: 'main.js',
    },

    /* Vamos a indicar con extensiones vamos a trabajar en
    este proyecto */
    resolve: {
        /* Importante pasar las extensiones con las que vamos a
        trabajar, como .jsx (React.js)  */
        extensions: ['.js']
    }
}

Después de configurar el archivo de configuración, vamos directo a la terminal a ejecutar el siguiente comando para que tome en cuenta nuestras configuraciones

npx webpack --mode production --config webpack.config.js

Para hacer más amigable la ejecución del comando, vamos a package.json y hacemos un script

"build": "webpack --mode production"

Nestor Javier Salas Pachón

student•

Gracias por tu aporte con el código comentado.

David Antonio Garcia Saaib

student•

Si por alguna razon no les funciona que el entry pueda leer su archivo de entrada, basta con especificar la ruta con path

  entry: path.resolve(__dirname, './src/index.js'),

Jovanny Alarcon C

student•

super tenia el problema>> ERROR in main Module not found: Error: Can't resolve '.src/index.js' in...<< GRACIAS!!!

Juan Carlos Valencia López

student•

en filename se puede poner el nombre y el hash que se genera con cada compilación y esto nos ayuda para entornos de producción cuando se implementa caché. De esta manera hacemos referencia siempre al nuevo archivo que generemos.

Se hace de la siguiente manera:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
    publicPath: "",
  },
  resolve:{
    extensions: ['.js']
  }
};

Oscar Barajas Tavares

Team Platzi•

Más adelante lo optimizamos y cambiamos todo a hash 🖖

José Vilca

student•

Webpack config ++generator++

Con esto puedes seleccionar los frameworks, preprocesadores, plugins, linternas, optimización, TODO (excepto pug :'v) https://createapp.dev/webpack/no-library aca tienen uno con muchas cosas seleccionadas jaja

Jibran Antonio Tannous Puerta

student•

Alucinante man!!! jajaja es la mejor herramienta. Será que siempre le darán mantenimiento porque cada día todo cambia y es un dolor de cabeza esto de las configuraciones T.T

Rafael Alejandro

student•

Excelente herramienta!.

Wilkins Bernardo Brito Serrano

student•

Les digo la verdad, a mi no se me ejecuta el comando de forma exitosa. me sale este error

Edgar Lopez Arroyo

student•

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js', //Punto de entrada
    output: { // Hacia donde vamos a enviar lo que va a preparar webpack
        path: path.resolve(__dirname, 'dist'), // Nombre del directorio
        filename: 'main.js' // Nombre del archivo
    },
    resolve: {
        extensions: ['.js']
    }
}```

Christian Alvarenga

student•

Me sale este error, no se si alguien me podría ayudar por favor.

Héctor Eduardo López Carballo

student•

Hola!

En tu archivo webpack.config.js en la línea uno tienes escrito "requiere" en lugar de "require". cámbialo y dinos si funciona, por favor.

Christian Alvarenga

student•

No puede ser! No sabes el dolor de cabeza que me causo, ya estaba a punto de tirar el escritorio. 😂😭

Miguel Angel Reyes Moreno

student•

Configuración de webpack.config.js

En el archivo webpack.config.js vamos a escribir todas las configuraciones que tendrá nuestro proyecto. Prepararemos cuál es el punto de entrada, hacía a donde va nuestro proyecto, extensiones que usará, etc.

'dist' es un estándar dentro de la compilación de los proyectos.

En el archivo 'package.json' podemos crear los comandos que introduciremos en la terminal y específicar qué queremos que hagan.

Jesus Enrique Esis Parra

student•

si aun te preguntas para que se utiliza realmente webpack y que ventajas nos da, recomiendo leer este articulo https://medium.com/tecninja/porque-usar-webpack-4a5004094455

Irving Juárez

student•

Ahora entiendo un poco mejor para que nos sirve Webpack y que es lo que hace. Sin embargo, sigo con dudas

Platzi Team

student•

Muchas gracias por tu aporte, es de mucha ayuda

JUAN DANIEL ROMERO OCHOA

student•

¿Alguien me podría ayudar a entender mi error? Muchas gracias.

Gustavo Vargas

student•

El error esta en output, es filename

output: {
    path: path.resolve(__dirname,"dist"),
    filename: "main.js"
  },

Alexander Cedeño

student•

Me apare esto al ejecutar npm run build

npm ERR! code EJSONPARSE npm ERR! file C:\Users\ajcn_\Documents_practicas\js-portfolio\package.json npm ERR! JSON.parse Failed to parse json npm ERR! JSON.parse Unexpected string in JSON at position 220 while parsing '{ npm ERR! JSON.parse "name": "js-portfolio", npm ERR! JSON.parse "version' npm ERR! JSON.parse Failed to parse package.json data. npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ajcn_\AppData\Roaming\npm-cache_logs\2021-04-07T13_33_18_895Z-debug.log

Fernando Quinteros Gutierrez

student•

🤔 Interesante problema

Parece ser que tienes un problema con las llaves en tu archivo package.json, revisa si cada llave tiene su par correspondiente y si todas las propiedades dentro de la misma tienen comas al final menos la línea antes de terminar la llave final del archivo. Además que todas las propiedades tengan sus comillas iniciales y finales, el formato debería ser similar a este

{
	"name": "js-portfolio",
	"version": "1.0.0",
	"scripts": {...},
	"dependencies": {...},
	"devDependencies": {...}
}

Espero haberte podido ayudar 😉

Miguel Hernández Casiano

student•

Tus posibles dudas resueltas:

1. ¿Por qué usamos requiere('path')?

Porque path es módulo "core" (principal) de node utilizado para gestionar rutas o "paths".

2. ¿Qué es el punto de entrada (propiedad entry)?

Es el archivo a partir del cual se generará el gráfico de dependencias. Las dependencias son los archivos (modulos) que se necesitan para que funcione la aplicación. Este puede tener el nombre que sea y estar en cualquier lado, aunque por defecto, el valor es ./src/index.js. en esta clase el profe puso el valor por defecto. Aunque bien podría ser diferente (tanto la ruta como el nombre del archivo js).

En el archivo de configuración de webpack se puede apreciar que entry es solo una de las posibles propiedades que lleva module.exports

Puede haber uno o más puntos de entrada. Esto se puede hacer poniendo dichos valores en el atributo "entry". Puedes checar la sintáxis en el siguiente vínculo:

3. ¿Por qué esa sintaxis en module. exports?

Tanto entry, como output y resolve son parte del objeto module.exports. Estos a su vez pueden contener diferentes tipos de datos. Por eso es que ves que algunos reciben corchetes, algunos llaves y algunos cadenas de texto. . El tipo de datos que recibe cada uno lo puedes encontrar en la documentación. .

4. ¿A qué se refiere el resolve?

Nosotros solemos utilizar cosas como import módulo from "../ruta_del_modulo/modulo.js" al estar programando. Con eso podemos utilizar código que está por fuera. A esto se le llama dependencias. Webpack revisa tu código y con base en esto genera el gráfico de dependencias. . Para generar el gráfico de dependencias, webpack debe saber exactamente en dónde se encuentra cada módulo/archivo. Y para esto requiere la ruta completa en tu disco duro, por ejemplo C:\usuario\proyecto\src\modulo1.js. A esta ruta se le llama absolute path.

Cuando utilizamos la sintaxis de punto o dos puntos como aquí: "../ruta_del_modulo/modulo.js", a esto se le llama relative path . Usar un relative path requiere "RESOLVER" la ruta. Al resolver la ruta se obtiene una absolute path. . A veces, cuando importamos un módulo no siempre ponemos la extensión del archivo del cuàl lo estamos importando. Para saber cuándo ponemos extensión y cuando no, te recomiendo que veas el curso de ecmaScript). . Cuando SÍ ponemos la extensión del archivo, dicho archivo se "empaqueta" automàticamente. Cuando NO ponemos la extensión del archivo, lo que hace Webpack es revisar el archivo de configuración y llega precisamente a la parte de resolveen module.exports. Este resolve, le dice qué archivos son admisibles para "resolver" y sobre todo el orden en que deben resolverse. En este caso el profesor solo indico que se deben resolver los archivos JS. Pero tambien se pudieron haber puesto, por ejemplo, archivos JSX y webpack los trataría de resolver en el orden que se los introdujimos a resolve. Esto es especialmente importante cuando tenemos varios archivos con el mismo nombre pero al importarlos no ponemos la extensión del módulo del que vienen.

5. ¿Es necesario añadir el --config webpack.config.jscuando ejecuto webpack?

No. En caso de que NO tengas archivo de configuración, webpack ya trae configuraciones por defecto. Pero en caso de que SÍ tengas archivo de configuración (como nuestro caso), webpack lo lee en automático. Ponerle --config webpack.config.js solo es didáctico para que tengas en mente lo que hace.

Miguel Hernández Casiano

student•

Vínculo para sintaxis de entry point: https://webpack.js.org/concepts/entry-points/ .

Alejandro Cuartas Marin

student•

En el siguiente enlace está la documentación de esta clase: . Es bastante clara.

Platzi Team

student•

No hay enlace :(

César Palma

student•

Está tan clara que ya no la veo xd

Ricardo F.

student•

Hola a todos. Tengo una duda acerca del proyecto. En ésta y las dos clases anteriores, el profesor ha creado el proyecto "curso-webpack" y luego el proyecto "js-portfolio". Para, luego, continuar en esta clase con el primer proyecto creado, sobre el cual indica que se desarrollará el curso. Sin embargo, los archivos contenidos en el proyecto "curso-webpack" han aumentado y cambiado entre cada clase. Sobre todo en la carpeta "src" donde ahora podemos encontrar muchos archivos adicionales. Existen pasos adicionales que deban realizarse o bastará, por esta vez, descargar y usar los archivos del proyecto que se distribuyen aquí en los recursos de la clase? Gracias.

Carlos Eduardo Gomez García

teacher•

¡Hola! ¿A qué te refieres con que pueden encontrar más archivos adicionales?

Para esta clase, en los recursos está el proyecto de js-portfolio que es con el cual el profesor estará trabajando el resto del curso, el primero de curso-webpack fue para explicar algunos conceptos básicos de Webpack, pero si no mal recuerdo, ya no lo volvemos a usar en el curso :D

Ricardo F.

student•

Hola!. Muchas gracias por tu respuesta. Pensé que sería "curso-webpack" el que usaríamos como tal, ya que eso es lo que el profesor indica en el video y entre los primeros videos se puede apreciar que la carpeta "src" subre un cambio grande. En buena hora entonces. Me basaré en "js-porfolio" para continuar el curso. Saludos.

Rafael Alejandro

student•

¿Porque en el archivo package.json al agregar el build solo se agregó “webpack --mode production” y no se agregó competo como en la consola es decir "webpack --mode production --config webpack.config.js"?

Jesús Ramon

student•

de hecho porque no se agrego el npx al principio como lo corriamos desde consola tambien?