Es un empaquetador de modulos
Es una herramienta que nos facilita trabajar con módulos. Los módulos son archivos que contienen clases, funciones etc. El objetivo de dividir todo en muchos archivos es que todo este más organizado, más fácil de mantener y actualizarlo. Osea, separar nuestro código en muchos archivos Javascript, pero los navegadores no tienen forma de juntar todos nuestros archivos, es aquí donde entra webpack, que junta todos nuestros archivos en unos solo, en ves de agregar muchos archivos js en nuestro archivo html. Sin el perderíamos compatibilidad y flexibilidad
Gestiona las dependencias(los paquetes que descargas para tus trabajos), monta rápido servidores de prueba para acelera el proceso de producción, cargar modulos ya que a veces segmentamos nuestra aplicación convertir a diferentes formatos(por ejemplo es8 a es5),minimizar codigo, compilar sass a css, compilar TypeScript a ES6, nos permite trabajar con ES6 moderno
En Webpack se conoce el punto de origen en donde se va a compilar todo en un único archivo
npm i -D
quiere decir que se instalara la dependencia como desarrollo, no producciónEntrar al archivo package.json y agregar lo siguiente
"scripts" : {
"build" : "webpack"
}
Entrar al archivo package.json y agregar lo siguiente
"main": "src/index.js",
Modificar el archivo package.json y agregar:
{
"presets": "@babel/preset-env"
},
Agregar el preset que vamos a usar en .babelrc
"scripts": {
"dev": "webpack --mode development --entry ./foo/src/index.js --output-path ./foo/dist",
"build": "webpack --mode production --entry ./foo/src/index.js --output-path ./foo/dist"
},
Crear el archivo webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.js$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
}, ],
},
};
Agrega esta otra configuración al archivo webpack.config.js
//Se pueden usar diferentes sintaxis en el USE
//Se exportan los pluggins porque es código de NODE JS
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [{
// i acepta cualquier archivo js en mayúsculas y minúsculas
test: /\.js$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{ //Creo otra regla
test: /\.html/i, //La i es para que acepte mayúsculas y minúsculas
use: [{
loader: "html-loader",
options: {
minimize: true,
}
}],
},
],
},
plugins: [
new HtmlWebpackPlugin({
//el archivo en el cual se va a basar para generar el archivo final
template: "./src/index.html",
//como quiero que se llame el archivo en la carpeta de distribución
filename: "./index.html"
})
]
};
Vamos a agregar OTRA configuración a webpack.config.js para transpilar CSS
//Se pueden usar diferentes sintaxis en el USE
//Se exportan los pluggins porque es código de NODE JS
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [{
// i acepta cualquier archivo js en mayúsculas y minúsculas
test: /\.js$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{ //Creo otra regla
test: /\.html/i, //La i es para que acepte mayúsculas y minúsculas
use: [{
loader: "html-loader",
options: {
minimize: true,
}
}],
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
],
},
plugins: [
new HtmlWebpackPlugin({
//el archivo en el cual se va a basar para generar el archivo final
template: "./src/index.html",
//como quiero que se llame el archivo en la carpeta de distribución
filename: "./index.html"
}),
new MiniCssExtractPlugin(),
]
};
Agrega otro comando en el archivo package.json
"scripts": {
"start": "webpack serve --mode development --open"
},
npm install --save-dev webpack
npm install --save-dev webpack-cli
"scripts": {
"build": "webpack",
"build-babel": "babel src -d output --watch"
},
Nota: correr los comandos npm run build y npm run dev para checar la diferencia en el archivo main.js
const path = require('path'); //Esta expotando un modulo de nodejs que te dice la ruta
module.exports = { //le dice la configuración a webpack de lo que queremos exportar
entry: './src/index.js', //archivo de entrada, es el archivo principal, donde importaremos todos los demás archivos
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
npm install --save-dev babel-loader
porque @babel/core ya lo tenemos instaladoconst path = require('path'); //Esta expotando un modulo de nodejs que te dice la ruta
module.exports = { //le dice la configuración a webpack de lo que queremos exportar
entry: './src/index.js', //archivo de entrada, es el archivo principal, donde importaremos todos los demás archivos
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
con exclude: /node_modules/ excluimos la carpeta de node_modules que contiene infinidad de archivos js que hacen funcionar
nuestro proyecto y solo se fija en el loader: "babel-loader", que es lo que me va a permitir conectar Babel con webpack
]
}
};
export const mensajeAlerta = (datos) => {
alert(datos);
}
mensajeAlerta("Hello World");
export {mensajeAlerta};
export class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
mostrarInfo() {
console.log(`${this.nombre} tiene ${this.edad} años`);
}
}
import { Persona } from './modulos/clasePersona';
class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
mostrarInfo() {
console.log(`${this.nombre} tiene ${this.edad} años`);
}
}
export { Persona };
export default class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
mostrarInfo() {
console.log(`${this.nombre} tiene ${this.edad} años`);
}
}
import Perro from './modulos/clasePersona';
const ric = new Perro('Ricardo', 33);
ric.mostrarInfo();
class Persona {
constructor(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
mostrarInfo() {
console.log(`${this.nombre} tiene ${this.edad} años`);
}
}
export default Persona;
import Persona from './modulos/clasePersona';
y lo mandas llamar como Persona para no complicarloconst ric = new Persona('Ricardo', 33);
ric.mostrarInfo();
npm init
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"}
con esto estoy indicando a mi aplicacion que cuando yo ejecute el comando
build dispare webpack con su configuración por defecto, y por defecto va a buscar la carpeta src, la carpeta js y va a unificar los archivos de js, los va a comprimir, y los va a dejar listos para producción
npm run build
y creara SIEMPRE la carpeta dist y node modulesnpm run build
npm i -D html-loader html-webpack-plugin
que sirven para que webpack mueva el archivo index.html a la carpeta dist y que incruste el bundle.js en el index, npm i -D
quiere decir
que se instalara la dependencia como desarrollo, no produccióntest: /\.html$/
esto quiere decir que le diga a webpack que aplique esta regla si es un archivo con extension
html
npm run build
me pasara el index.html a la carpeta dist con 2 importaciones al main.js, podemos borrar la etiqueta script con el ../dist/main.jsdde mi index.html
que esta en la carpeta dist por que webpack lo agregara por mi cuando haga el build, incluso si borro el main.js me lo agregara. NOTA: a las personas que están acostumbradas a trabajar con Angular,
esta es la razón por la cual no hay otras importaciones adicionales de scripts aquí(en el index.html), porque webpack lo hace por nosotros minimize: false
en la parte de optionsLa configuración completa
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
module: {
rules: [{
test: /\.html$/i,
loader: 'html-loader',
options: {
attributes: false,
minimize: false
},
}]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
}),
]
}
npm i -D webpack-dev-server
"start": "webpack-dev-server --open"
para que inmediatamente se ejecute el servidor webpack te abra la pestaña, porque estamos usando la url
file:// cuando necesitamos http://, a mi en Ubuntu me abrió localhost:8080/ después de correr el comando npm start
npm start
para correr el servidor de webpack