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} */
Introducción a Webpack
¿Qué es Webpack?
Conceptos básicos de Webpack
Proyecto inicial
Tu primer build con Webpack
Instalación de Webpack y construcción del proyecto
Configuración de webpack.config.js
Loaders y Plugins en Webpack
Babel Loader para JavaScript
HTML en Webpack
Loaders para CSS y preprocesadores de CSS
Copia de archivos con Webpack
Loaders de imágenes
Loaders de fuentes
Optimización: hashes, compresión y minificación de archivos
Webpack Alias
Deploy del proyecto
Variables de entorno
Webpack en modo desarrollo
Webpack en modo producción
Webpack Watch
Deploy a Netlify
Herramientas de desarrollo complementarias
Webpack Dev Server
Webpack Bundle Analyzer
Webpack DevTools
Integración básica de React.js
Instalación y configuración de React
Configuración de Webpack 5 para React.js
Configuración de plugins y loaders para React
Configuración de Webpack para CSS en React
Optimización de Webpack para React
Deploy del proyecto con React.js
Próximos pasos
Continúa con el Curso Práctico de Webpack
Aportes 37
Preguntas 23
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} */
webpack.config.js
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"]
},
}
—config
indica donde estará nuestro archivo de configuraciónnpx webpack --mode production --config webpack.config.js
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
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']
}
};
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
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
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
"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"),
},
};
.
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:
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"],
},
};
module.exports
, modulo que vamos a exportar con la configuración deseada./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
.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.
webpack.config.js
.This file is the main source. Is where are all settings that I’m going to add to the project.
create the entry point to connect all the modules and elements in the project.
module.exports = {
entry: './src/index.js',
}
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.
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']
}
}
npx webpack --mode production
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.