Recordar etiqueta –config Alli va el archivo de configuracion
la diferencia de webpack 5 es que hay muchas cosas qeu son automaticas
Webpack se componen de 3 partes
punto de entrada
Primero creamos el proyecto con NPM init
Npm Init
Creamos nuestro punto de entrada en /src/index.js, este es el que viene por defecto no hay necesidad de decirle a webpack
en webpack no hace falta poner las extensiones porque las resuelve es decir
si es un app.js solo ponemos req URL_TO/app;
añadimos un script en el apartado de package.json
creamos una carpeta donde queremos nuestro proyecto
abrimos nuestro IDE dentro de nuestra carpeta y ejecutamos el comando
Npm Init
Nos preguntara
- el nombre del proyecto
- la version
- La descripcion del proyecto
- El punto de entrada
- el comando de Pruebas
- si tiene un repositorio en git
- Las palabras claves
- El autor
- La licencia
- y por ultimo nos mostrara la version del documento y si estamos deacuerdo como queda
yo a todas estas opciones las deje por defecto puesto que hare mis configuraciones mas adelante
queda asi como la imagen

Nos crea el archivo Package.json
— INSERTAR AQUI IMAGEN 2–
creamos la carpeta src y dentro el archivo index.js.
–inserte imagen numero 3—
para probar que todo este funcionando ejecutamos el comando
webpack
en caso de que no lo tengamos instalado debemos instalar webpack tenemos dos opciones instalarlo globalmente con el siguiente comando
npm install --global webpack webpack-cli
o instalarlo localmente (solo valido para esta instalacion), se recomienda instalarlo localmente puesto que si lo instalamos globalmente solo vamos a disponer de una version de webpack y tendremos conflictos al abrir un proyecto de otra version asi que ejectucamos el comando
npm install --global webpack webpack-cli
Una vez ejecutado el comando webpack nos crea una carpeta llamada dist(de distribucion) y main.js
INSERTE IMAGEN 4
Podemos añadir en el package .json el comando webpack seguido de la etiqueta que indica el modo en que compilara nuestros archivos en este caso desarrollo seria
"build": "webpack --mode=development"
Quedando nuestro archivo index.js de esta manera
{
"name": "webpack-5-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=development"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.58.0",
"webpack-cli": "^4.9.0"
}
}
en este punto no hemos creado un archivo de configuracion y estamos usando las configuraciones automaticas de webpack, debemos crear el archivo de configuracion podemos usar el nombre que viene por defecto webpack.config.js, o podemos cambiarle el nombre usando la etiqueta –config
"build": "webpack --mode=development --config=webpack.config.js"
ahora procedemos a crear el archivo webpack.config.js, podemos usar el nombre que nos guste sin embargo el estandar es «webpack.config.js» en la carpeta raiz, quedando asi

El archivo webpack tienen varios apartados entre ellos destacan
- Entry : el punto de entrada indica donde deberia comenzar a «procesar», por defecto es src/index.js
- Output: es el resultado de compilar todo por defecto es dist/main.js
- Loaders: por defecto webpack solo entiende archivos Json y Javascript, los loaders permiten procesar y convertir otros tipos de archivos, para que lo entienda el navegador
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};
- Plugins mientras los loaders son usados para trasnformar ciertos tipo de modulos, los puglings pueden usados para amplias tareas como optimizacion, manejo de dependencias,
- inyeccion de variables de entrono
ejemplo
-
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm const webpack = require('webpack'); //to access built-in plugins module.exports = { module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], };
In the example above, the
html-webpack-plugin
generates an HTML file for your application and automatically injects all your generated bundles into this file. - Mode: por defecto viene como modo produccion (production) puedes elegir entre desarrollo(
development)
, produccion(production
) or no optimizar nada (none )
- Browser Compatibility: para compatibilidad con navegadores que no soporten promesas, requieres cargar un «polyfill» esto no lo trataremos en este post
__dirname
is an environment variable that tells you the absolute path of the directory containing the currently executing file.path
module provides utilities for working with file and directory paths. It can be accessed using:) el archivo quedaria asi
const path = require('path');
module.exports = {
//entry point default, its
// entry : './src/index.js',
//change the output file
output:{
path: path.resolve(__dirname,'build')
}
}
Ahora nuestra aplicacion va a ser en react este seria el primer paso para nuestra aplicacion de finanzas….
creamos el archivo
./src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render( , document.getElementById('root'))
creamos el archivo ./src/apps.js con este contenido
const App = () => {
return (
hello soy un modulo :D
)
}
export default App
te va a salir un error como este — INSERTAR IMAGEN 7–
Esto de debido a que como dijimos arriba Webpack Solo entiende Javascript y Json, y la etiqeuta <app> es React entonces debemos hacer uso de un loader para cargar lo necesario para procesar el modulo de react en este caso necesitamos Babel para procesar