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"

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

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

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

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

¿Se puede en Linux ?

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

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

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

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.

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

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

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

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