Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Configuraci贸n de webpack.config.js

5/28
Recursos

Aportes 37

Preguntas 23

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

<h4>Apuntes</h4>
  • 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 鈥攃onfig 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

<h4>Configuraci贸n de webpack.config.js</h4>

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.

鈥榙ist鈥 es un est谩ndar dentro de la compilaci贸n de los proyectos.

En el archivo 鈥榩ackage.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(鈥減ath鈥)
    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, 鈥渄ist鈥) : 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: 鈥渕ain.js鈥 nombre al resultante del JavaScript que va a resultar, tambi茅n puede ser bundle o con un hash.
  • npx webpack 鈥攎ode production 鈥攃onfig 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 鈥榙ist鈥 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 //

鈥渂uild鈥: 鈥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 ?

<h3>Configuraci贸n webpack.config.js</h3>

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鈥檓 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鈥檛 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 鈥渟rc/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.