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

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

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

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

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

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

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

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

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",

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

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 no se pasa el comando npx para el script de build con webpack, en el package.json?

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"
  }

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 🤩

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

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"
     }
   

Archivo de configuración de webpack.config.json:

const path = require('path');

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

Comando para la ejecución de webpack con el archivo de configuración especifico

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

Edicion del package.json para tener un comando que permita la ejecución del build con webpack un poco mas rápido:

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

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

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

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.