Configuración de webpack.config.js

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} */

⚙️ Configuración de webpack.config.js

• 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.

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

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

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

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"

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'),

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']
  }
};

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

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

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']
    }
}```

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.

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

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.

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

Pero yo estoy confundida o del todo muy perdida, en la clase anterior creamos la carpeta donde estábamos trabajando el proyecto js-portafolio y ahora entra a la terminal y está trabajando en curso-webpack ¿Dónde continuo? 😖

Lo que pudo entender de esta clase, es que este archivo webpack.config.js es el mas básico, que incluso no es necesario tenerlo, como en la clase anterior.

Actualmente no necesité poner la propiedad entry, puesto que por defecto webpack busca como entry la dirección “src/index.js”. En caso de no tener este index, si sería necesario especificarlo.

const path = require('path')

module.exports = {
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'build')
    },
    resolve: {
        extensions: ['.js']
    },
}

De verdad que qué desorden, parece que al profesor se le olvidó explicar algo importante, por que me da un error y creo que es por no explicar en que carpeta es que se está trabajando el proyecto…

Unknown command or entry ‘mode’

¿Por que no se pasa el comando npx para el script de build con webpack, en el package.json?

// commands //

npm init -y : archivo de package.json predefinido.

npm install webpack webpack-cli -D
npx webpack --mode (development | production)
npx webpack --mode production --config webpack.config.js (archivo config)

// scripts //

“build”: “webpack --mode production” asi webpack reconoce el archivo config automaticamente.

SETTING OF WEBPACK.CONFIG.JS

Aporte

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} */

Ahora que entendemos nuestro proyecto y que sabremos que le vamos a realizar a llegado el momento de pasar a la parte mas importante, nuestro archivo de configuracion de webpack que nos va a ayudar a poder establecer la configuracion y los elementos que vamos a utilizar

• Louders
• Plugins
• Entre otras configuraciones que a lo largo de este curso vamos a estar optimizando para este proyecto

Creamos el archivo Webpack.config.js en la parte superior de nuestro proyecto para configurar nuestro proyecto a lo largo de este curso estaremos manejando solo este archivo, este archivo va a ser nuestro recurso principal en el vamos a trabajar todas las configuraciones que va a estar utilizando nuestro proyecto.

Lo primero que haremos es prepararlo para que pueda entender cual es el punto de entrada, hacia donde va enviar la compilacion de nuestro proyecto y asi como tambien cuales van a ser las extensiones que va a estar trabajando.

//Creamos una constante y utilizamos un requiere para traer
 //Este elemento, esto ya esta disponible en node asi que no
  //Necesitamos instalar nada

const path = require('path');

//Creamos un modulo que vamos a exportar con un objeto que va a tener
 // La configuracion deseada de nuestro proyecto

module.exports = {
  //la primera configuracion que anadimos es entry la cual nos va a permitir
    //establecer el punto de entrada de nuestra aplicacion
      // apartir de aqui todo se va conectando
  entry: './src/index.js',

  //Es hacia donde enviamos lo que va a preparar webpack en este caso podremos
   //establecer un nombre de carpeta o nombre de archivo y entre otros 
    //es importante establecer un nombre especifico para esto que es la carpeta
      //dist que es un diminutivo de distribution

  //En un objeto dentro de output vamos a anadir los elementos internos para trabajar
    //lo primero es path que es lo que trajimos al inicio para hacer el uso de resolve 
      // que nos va a permitir saber donde se encuentra nuestro proyecto en que
        //directorio y poderlo utilizar  de esta forma no tendremos un problema con el 
          //nombre de la carpeta, o donde estoy posicionado.

    //Asi cuando enviemos nuestro proyecto a un servidor en la nube va a preparar
      //nuestro proyecto va a utilizar el directorio que esta encontrandoce este 
        // repositorio o este proyecto con eso garantizamos que siempre encontrara
          // La carpeta donde se ubica este proyecto.
    //Podremos utilizar el nombre que queramos por en este caso es recomendado 
      // utilizar dist ya que es un estandar de la compilacion de estos proyectos
  output:{
    path: path.resolve(__dirname, 'dist'),
    //podremos ponerle un nombre al archivo resultante del js que se va a unificar
      //podremos encontrarlo como bundel o hash pero por el momento utilizamos main
    filename: 'main.js',
  },

  //extensiones con las que trabajaremos
  resolve:{

    //En un arreglo pasaremos las extensiones que vamos a utilizar
      //normalmente lo que utilizamos .js 
       // pero si estamos trabajando con svelte o react vamos a tener 
        // que establecer que tipo de extensiones va a tener que
          //identificar webpack para leer los archivos que hay dentro de
            // nuestro proyecto
    extensions:['.js'],
  }

}

De esta forma compilaremos nuestro archivo de webpack, resultado que podremos obtener pasdandole los comandos por consola

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

Y podremos ver el archivo main de js que es donde tenemos nuestro proyecto pero nos hacen falta cosas

Tenemos que trabajar con css y html entre otras cosas

• Para hacer mas amigable la ejecucion del comando podemos venir a nuestro package.json y poner un script que nos ayude a preparar esta configuracion
• Podremos escribir mas facil los comandos

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },

Amo los cursos de Oscar, siempre le pone buena vibra a sus clases!

En el caso de la importación del módulo path,es posible usar la desestructuración de objetos de javascript para usar los métodos comunes.

	const { resolve, join } = require('path');

Para los scripts, en particular me gusta poner el nombre de la herramienta que estoy usando en los mismos, aquí un ejemplo de alternativa

{
	"scripts": {
		"webpack.prod": "webpack --mode production --config webpack.config.js",
    "webpack.dev": "webpack --mode development --config webpack.config.js"
	},
}

	# example
	npm run webpack.prod
	npm run webpack.dev

usé para evitar errores.

<       
      resolve:{
        extensions: ['.js', '.jsx']
    }


> 

Desde el archivo package.json puedes definir los scripts y lo mejor es que ahora si puedes hacer uso de las librerias instaladas ya sea en dependencies o devDependencies sin necesidad de utilizar npx que lo que hacia era ejecutar el comando de webpack de forma remota.

Hola, les dejo el archivo webpack.config.js en este comentario para que les sea más facil seguir el tutorial 😄

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

gente a mi me daba un error, hasta que lei la documentacion , y use el siguiente codigo, difiere levemente.

const path = require("path");

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

5.-Configuración de webpack.config.js

.

• Nos ayuda a establecer la configuración y elementos que vamos a usar como los loaders o plugins entre otras configuraciones.
• Creamos un archivo de configuración de webpack en la raíz de nuestro proyecto y le llamamos webpack.config.js.
• Aquí es donde va a ir toda la configuración que vamos a realizar para el proyecto.
• Lo primero que vamos a hacer es prepararlo para que entienda el punto de entrada, hacía donde va a enviar la configuración de nuestro proyecto, así como también que extensiones estará trabajando.
• entry: para el punto de entrada de nuestra app, es muy importante porque nosotros debemos establecer cual es el elemento inicial de nuestra aplicación.
• output: Hacía donde vamos a mandar lo que va a preparar webpack. Es importante establecer que webpack tiene un nombre específico para esto que es la carpeta dist.
• path.resolve(__dirname, “dist”) : para saber donde se encuentra nuestro proyecto, en que directorio y poderlo usar, para no tener problemas con el nombre de la carpeta, en donde estoy, etc. Asi garantizamos que siempre encontrara la carpeta donde se ubica el proyecto.
• filename: “main.js” nombre al resultante del JavaScript que va a resultar, también puede ser bundle o con un hash.
• npx webpack —mode production —config webpack.config.js : para que lea la configuración que queremos que lea.
• Para hacer más amigable la ejecución del comando podemos ir a package.json y crear un script que nos ayude a preparar la configuración. De esta forma ya no tenemos que agregar el nombre del archivo, ya que webpack directamente lee el archivo en la raíz.
• Ahora solo se ejecuta con npm run build.

Pueden agregar el mode en production directamente en la configuracion de webpack.

.
.

Asi no es necesario especificarlo en el script de nuestro package.json.

	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "webpack"
	},

Webpack config

Tenemos que ver nuestro archivo de configuraciom, que nos ayudara a establecer las configuraciones que vamosa a utilizar como los loaders o plugins que vamos a optimizar.

En nuestro editor de codigo debemos crear un archivo de configuracion de nombre:

webpack.config.js

Este archivo sera el recurso principal, en el se trabajaran todas las configuraciones del proyecto. Hay que prepararlo para que entienda cual es el punto de entrada, hacia donde va a enviar la compilacion y cuales seran las extenciones que trabajara.

Primero necesitamos un path que con un requiere traera este mismo elemento.

const path = require('path');

Primero exportaremos un modulo que va a exportar un objeto con la configuracion deseada con:

module.exports = {
	//AQUI IRAN TODAS LAS CONFIGURACIONES
}

La primera configuracion es decir cual es el punto de entrada de nuestra aplicacion. Esto es importante porque debemos establecer cual es el elemento inicial de la aplicacion.

entry: 'RutaPuntoDeEntrada',

Otro elemento es el output que es donde vamos a enviar lo que va a preparar webpack, una carpeta o un archivo, esto es importante establecer porque webpack tiene un apartado por default para esto que es la carpeta ‘dist’ que significa Distribution, este es un objeto donde dentro agregaremos los elementos internos para trabajar.:

output: {
	path: path.resolve(_dirname,'dist') //Es para saber donde se encuentra nuestro proyecto y utilizarlo
	filename: 'main.js' //ponerle nombre al resultante del JS que se unifica
}

Para saber con que extenciones vamos a trabajar en este proyecto vamos a utilizar un objeto donde en un arreglo vamos a pasar las extenciones que vamos a utilizar.

resolve:{
	extensions:['.js'] //SI TENEMOS MAS POR FRAMEWORKS ETC LOS AGREGAMOS
}

Ahora tenemos que preparar el proyecto para que funcionen y se guarden nuestras configuraciones, en la terminal lo hacemos con:

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

Para hacer mas amigable el comando podemos agregarr un comando en el package.json en scripts con:

'build': "webpack --mode production",

El archivo de configuración de Webpack, como su nombre lo dice ayuda a definir la configuración y los archivos que vamos a utilizar como loaders, plugins y demás.

El archivo de configuración debe llamarse webpack.config.js y debe ser creado en la raíz del proyecto.

Lo primero que hay que hacer es usar la dependencia path que ya viene con Node JS. Lo siguiente es crear un módulo que se va a exportar y dentro lo siguiente:

• Entry: El archivo que es el punto de entrada de la aplicación
• Output: Este es un objeto donde se define el path y el nombre del archivo resultante. El path sirve para que no se tenga que definir de forma estática la ruta.
• Resolve: Aquí se definen las extensiones de los archivos con los que va a trabajar Webpack

Para ejecutar Webpack con este archivo de configuración se debe específicar en el comando

Para ejecutar este comando de forma más fácil se puede añadir a la sección de scripts del package.json

De esta forma ya no se tiene que especificar el archivo de la configuración, lo tomará automáticamente. Corremos el comando con npm run build.

Por que la terminar del profe tiene esa herramienta de autocompletar. ¿ Como hace eso ?

¿Se puede en Linux ?

Es desde este archivo que vamos a poder establecer toda la configuración y elementos que vamos a utilizar en el proyecto, como loeader, plugins, etc.

Para ello, en la raíz de nuestro proyecto creamos un archivo llamado webpack.config.js, este será nuestro archivo de configuración del proyecto. La estructura básica de este archivo sería de la siguiente manera:

const path = require("path");

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

• path: path ya viene instalado en NodeJS, por lo cual no vamos a necesitar instalar dependencias. Path provee de utilidades para trabajar con archivos y directorios.
• module.exports, modulo que vamos a exportar con la configuración deseada.
• Entry: Punto de entrada de nuestra aplicación, elemento inicial. A este elemento se pueden pasar arrays. 🔗 Webpack: Entry - Documentation
• Output: Hacia donde vamos a envíar la salida de datos webpack, webpack tiene ya un nombre para esto y es la carpeta /dist. En esta ocasión usando output.path, establecemos el directorio absoluto de nuestro proyecto y asi evitarnos problemas de nombres de carpetas, posicionamiento, etc.
  • __dirname: Se refiere al nombre del módulo actual. 🔗 Posible problema con __dir.
  • "dist": Nombre del directorio final o path del proyecto.
  • output.filename: Archivo que recibirá la salida del proceso de webpack, la ubicación de este archivo es especificado con el output.path. El output.filename es el requerimiento mínimo de output.
• Resolve: Aquí configuramos la manera en que se resuelven los módulos.
  • extensions: Podemos indicar cuáles extensiones va a utilizar webpack, al hacerlo vamos a modificar el valor por defecto por lo cual webpack ya no podrá resolver usando las extensiones por defecto.

Para preparar nuestro proyecto utilizando nuestra nueva configuración solo debemos utilizar el comando npx webpack --mode production --config webpack.config.js. Por defecto, el modo production ya viene activo, así como por defecto, cuando existe un archivo llamado webpack.config.js, webpack lo toma como archivo de configuración, aunque explicitamente podemos cambiar el nombre del archivo y anunciarlo por nuestra terminal.

La ejecución de este comando podemos hacerla más amigable utilizando un script en nuestro package.json, de tal forma que:

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

**configuracion de webpack **
creamos un archivo llamado webpack.config.js
ahora vamos a preparamos el punto de entrada y a donde va a enviar la compilación del proyecto y las exenciones que se van a trabajar

const path = require('path');//esto ara llamar el elmeento path

// crearemos un modulo que va exportar una configuracion
module.exports = {
    //aca van las configuraciones 
    entry:'./src/index.js',//este nos sirve para indicar cual es el puto de entrada de la aplicacion 
    output:{                            //este dist puede ser cualquier otro nombre pero dist e usado por que es un estandar
        path: path.resolve(__dirname, 'dist'),//nos dira en que directorio esta el proyecto para usar
        filename:'main.js'//ponemos el nombre resultante del js que se unira
    },//indicamos a donde vamos a enviar lo que prepare webpack 
    //Ahora vamos a aplicar las extenciones que vamos a trabajar
    resolve: {
        extensions:['.js']
    }
}

Ahora vamos a correr el proyecto con el siguiente comando

npx webpack —mode production —config webpack.config.js

Si deseamos cambiar script para que quede mas corto podemos dirgirnos a el archivo package.jsony en la seccion de “script” debajo ponemos el nombre y el comando

“build” : “webpack - -mode production”

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 ``` // me salieron muchos errorres al ejecutar el comando de config y encontre esta solucion en los comentarios, autor Omar Maldonado Villanueva

Para los que se les estira el código hacia la derecha y el infinito,
con el comando (en visualstudio) ’ alt + z’ , lo pueden justificar.

exelente

Chicos no podemos adjudicar al profe que se nos de como esperamos… la verdad es que los errores promueven el manejo de la paciencia… sino se tiene… entonces hay que seguir esforzandonos en ese sentido… la paciencia es vital aqui… y nada de carreras hay que disfrutar esto…

Siiiii todos los errores solucionados… pa que respeten a los mayores… arooo… vamos con todo

Aqui les dejo una extensión sobre el module.exports de webpack y de ciertas cosas que pueden generar interés. output recibe un objeto como valor, el primero es el path.resolve(__dirname,‘dist’). Habiamos requerido path y uno de sus métodos es resolve el cual permite obtener rutas absolutas de una manera sencilla y como argumento enviamos dirname, para obtener la ubicacion absoluta de donde estária ubicado la salida del proyecto.
En el atributo resolve del module.exports permite cambiar la forma en que se resuelven los módulos y la propiedad extensions indica las extensiones que vamos a utilizar y las resuelve en el orden en el que se las ponga en el array.
Para mas infor les dejo los sitios. 4 métodos importantes del módulo path
resolve webpack

Mis apuntes y el progreso de este curso lo estoy plasmando en este repo.

Si les sale un error, solo ejecuten el comando de esta manera:
npx webpack --mode production
No es necesario el resto.

extensions: [".js"]
Sirve para resolver el problema en que hay una importación
//de un archivo, pero no se sepa la extensión o cuando exite más de un archivo con el mismo nombre, para ello se va a resolver probando con
//las extensiones que se coloquen en este array. Gracias a esto se puede evitar colocar
//file.js y solo colocar file. Además de .js se puede colocar otras extensiones.
Si no se especifica las extensiones webpack resolvera ese problema con archivos del
//mismo nombre con las extensiones que indica por default.
Para una mejor explicación ir a este link.

No entendí lo del resolve, pero ahí les va lo que entendí leyendo la documentación:

La propiedad resolve de las configuraciones de webpack sirve para especificar cómo se resuelven los imports y/o requires del código fuente. La propiedad extensions de resolve le indican a webpack que cuando busque un módulo que importar, éste sea .js prioritariamente. Por lo general, se puede omitir porque los valores por defecto están bien pensados (según la doc , pero no encuentro cuáles serían esos valores por defecto)

Que gran utilidad tiene webpack, ni les digo lo que hago para publicar mis proyectos en producción 🙄😥, pero bueno este conocimiento es muy valioso a seguirle 🤩

el curso podrá ser muy bueno y todo lo que digan pero cuando tienes un problema o error no te dice como solucionarlo creen que por default todo esta bien y no algunos les falla algo y no se puede avanzar, es lo malo de cursos donde esta grabado todo y no es en vivo.

Create config file webpack.config.js .

This file is the main source. Is where are all settings that I’m going to add to the project.

1. create the entry point to connect all the modules and elements in the project.

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

2. create the output point. This allows us to have a place where can see the result of webpack optimizations.

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

   The path module allows us to use the resolve method, this helps to bring the directory name and don’t have problems with the cloud deploys and another problems.

3. set the extensions that we are going to work on the project.

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

Hacer más fácil la ejecución del comando npx webpack --mode production

1. Add an script at the package.json .

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

creo que hasta ahora de los mejores cursos que he hecho de Oscar