¿Qué es Webpack?

Es un empaquetador de modulos

¿Para que sirve?

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

Notas varias

1. React y Angular ya tienen webpack por defecto
2. Webpack detecta por default la carpeta src
3. Da un orden de archivos webpack
4. Cuando no configuramos, por defecto, webpack corre todo en modo de producción, y quita comentarios, dejar codigo limpio, simplificarlo, pero cuando estamos desarrollando yo necesito mis comentarios, para eso configuramos tomo en modo development
5. Los rules sirven para decirle a webpack que hacer con cierto tipo de archivos
6. 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
7. npm i -Dquiere decir que se instalara la dependencia como desarrollo, no producción
8. Gulp y Grunt
Son task runners y los procesos se van haciendo de manera separada
9. webpack.conf.js es donde se configuran todos los procesos de construcción, que se escribe con NODE, no con js de los navegadores
10. Create react app es un builder que nos permite empezar a crear un proyecto inmediatamente y desarrollar en react sin necesidad de configurar webpack
11. loaders son paquetes de node que nos van a permitir realizar transformaciones de archivos, por ejemplo, para compilar el CSS, otro para interpretar JSX la sintaxis de React, otro para la sintaxis de TypeScript, otro para la sintaxis de Vue
12. Pluggins o modulos realizan una acción en concreto, por ejemplo un modulo para inyectar todas las dependencias al archivo principal .html , para extraer el código CSS a una hoja independiente etc

13. Webpack tiene 4 conceptos clave:

    • Entry:Indica cuál es el punto(s) de entrada.
    • Output: Indica cuál es el punto(s) de salida.
    • Loaders: Realizan transformaciones en los archivos.
    • Plugins: Realizan acciones en los archivos.

Estilo John Mircha

1. npm init en la carpeta donde vayamos a desarrollar para crear el archivo package.json
2. npm i -D webpack webpack-cli en la misma carpeta

3. Entrar al archivo package.json y agregar lo siguiente

   "scripts" : {

   "build" : "webpack"

   }

4. Ejecuta el comando npm run build
5. Crear la carpeta src
6. Crear archivo index.js en la carpeta src

7. Entrar al archivo package.json y agregar lo siguiente

   "main": "src/index.js",

8. Correr npm run build de nuevo para que te genere el archivo de salida ./dist/main,js

9. Modificar el archivo package.json y agregar:

   {

   "presets": "@babel/preset-env"

   },

10. Instalar Babel para transpilar JS usando el comando npm i -D babel-loader @babel/core @babel/preset-env
11. Crea el archivo en la raíz, que es el archivo de congiguración de Babel y decirle que presets de Babel vamos a utilizar

12. 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"

    },

13. Crear el archivo webpack.config.js

    module.exports = {

    module: {

    rules: [{

    test: /\.js$/i,

    exclude: /node_modules/,

    use: {

    loader: "babel-loader",

    },

    }, ],

    },

    };

14. Crea un archivo index.html

15. 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"

    })

    ]

    };

16. 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(),

    ]

    };

17. Crear un archivo style.css en la carpeta src
18. Instalar el servidor de Webpack con el comando npm i -D webpack-dev-server

19. Agrega otro comando en el archivo package.json

    "scripts": {

    "start": "webpack serve --mode development --open"

    },

20. Para hacer trabajar al servidor, usar el comando npm start

Instalación y configuración(Checar instalación previa en la sección de Babel js)

1. Instalar webpack npm install --save-dev webpack
2. Instalar webpack-CLI npm install --save-dev webpack-cli
3. Crear el archivo de configuracion de webapck llamado webpack.config.js en la raiz
4. En el archivo package.json debes crear un script y modificar el que ya tenías llamado build

   "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

5. Ir a esta sección de webpack Modules y copias la parte de webpack.config.js y pegarlo en tu archivo webpack.config.js
6. xEplicación del código:
   

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

   },

   };

7. Crearemos el archivo app.js en la carpeta src y en nuestro archivo webpack.config.js vamos a modificar la ruta a entry: './src/app.js'
8. Luego le cambiamos el archivo de salida a filename: 'bundle.js', que es el nombre estandar que usan los desarrolladores donde tendrá todo el código de nuestra aplicación web
9. En esta linea de código path: path.resolve(__dirname, 'dist'), modificaremos y quedará así path: path.join(__dirname, '/'), esto para que, __dirname lo que hace es obtener la ruta de todo nuestro proyecto , el / es para decir que lo queremos en la raíz
10. Te aparecerá un archivo bundle.js en la raiz que trae código, pero ahí viene todo el código de tu aplicación
11. Enlaza el archivo bundle.js a tu archivo html
12. Ahora necesitamos que Babel haga uso de webpack, para eso vamos a este Link y das click en Webpack
13. Vas a instalar lo siguiente en la linea de comandos npm install --save-dev babel-loader porque @babel/core ya lo tenemos instalado
14. Vas a copiar el código en el sitio de babel del paso 3 y debe de quedar así :
    

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

    },

    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

    ]

    }

    };

15. En el archivo app.js vas a importar todos los archivos que tengas usando la sig sintaxis import { mensajeAlerta } from './modulos/mensajeAlerta'; OJO: NUNCA debes de poner .js , solo el nombre de los archivos
16. Cuando vayas a exporta, pones la palabra export a cada funcion que vayas a querer usar, Ejemplo:
    

    export const mensajeAlerta = (datos) => {

    alert(datos);

    }

    
    Y en el archivoapp.js mandas llamar tu función mensajeAlerta("Hello World");
17. Otra manera de exportar es que hasta abajo del archivo exportar las funciones export {mensajeAlerta};
18. Para no tener que compilar siempre, en el archivo package.json modifica el script build y ponle "build": "webpack --watch",
19. Lo que más se exporta son funciones y clases, ejemplo:
    

    export class Persona {

    constructor(nombre, edad) {

    this.nombre = nombre;

    this.edad = edad;

    }

    mostrarInfo() {

    console.log(`${this.nombre} tiene ${this.edad} años`);

    }

    }

    Y lo importas en tu archivo app.js así import { Persona } from './modulos/clasePersona';
20. Otra manera de exportar tus clases es así:

    class Persona {

    constructor(nombre, edad) {

    this.nombre = nombre;

    this.edad = edad;

    }

    mostrarInfo() {

    console.log(`${this.nombre} tiene ${this.edad} años`);

    }

    }

    export { Persona };

21. También puedes exportar por defecto y cuando la importes la puedes llamar como quieras y omitir las llaves, el export por default solo lo puedes hacer unas vez por archivo , ejemplo:

    export default class Persona {

    constructor(nombre, edad) {

    this.nombre = nombre;

    this.edad = edad;

    }

    mostrarInfo() {

    console.log(`${this.nombre} tiene ${this.edad} años`);

    }

    }

    Y lo importas en tu archivo app.js así import Perro from './modulos/clasePersona';
    Incluso cuando llames la clase, también puedes mandarla a llamar con el nuevo nombre:
    const ric = new Perro('Ricardo', 33);
ric.mostrarInfo();
    Otra manera de exportar por default seria
22. Otra manera de exportar tus clases es así:

    class Persona {

    constructor(nombre, edad) {

    this.nombre = nombre;

    this.edad = edad;

    }

    mostrarInfo() {

    console.log(`${this.nombre} tiene ${this.edad} años`);

    }

    }

    export default Persona;

    Y lo importas en tu archivo app.js así import Persona from './modulos/clasePersona'; y lo mandas llamar como Persona para no complicarlo
    const ric = new Persona('Ricardo', 33);
ric.mostrarInfo();
23. Lo que más se exporta son funciones y clases
24. export default es otra forma de exportar, sirve para exportar SOLO UNA COSA, ya que usualmente(no siempre) los programadores, tienen una clase o función por archivo, y así exportan de manera más rápida, e incluso le puedes cambiar el nombre a la clase cuandola importes

Webpack tutorial Fernando Herrera

1. Crea tu archivo .json posicionandote con la terminal en la carpeta done crearas tu proyectos usando el comando npm init
2. Indicaras el nombre de tu package name la version, descripcion, test comand sirve por si hay un comando de pruebas automaticas,git repository, keywordsen el que caso de que quieran subir su paquete al grupo de repositorios de Node, author tu nombre y licencia ISC
3. En los archivos .json es obligatorio que lleven comillas cada cosa descriptiva
4. INSTALO npm install webpack webpack-cli --save-dev el --save-dev quiere decir que esto lo ponga como una dependencia de desarrollo, osea que no va a ir a producción
5. Entrar al archivo package.json y agregar "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
6. EJECUTAR el comando npm run build y creara SIEMPRE la carpeta dist y node modules
7. SIEMPREque hagas modificacion en tus archivos, vuelve a correr npm run build

Configuración de webpack

1. CREAR el archivo webpack.config.js en la raiz, donde está el archivo package.json
2. Los rules sirven para decirle a webpack que hacer con cierto tipo de archivos
3. INSTALAR 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ón
4. al final de esta lista pondre el código, para saber como debe estar todo
5. test es la condición que webpack tiene que hacer cuando este evaluando archivo por archivo, y esta condición se va a aplicar si el archivo cumple la siguiente expresión regular(una expresion regular me permite buscar coincidencias de lo que ya sea que especifique aquí dentro de un string). Ejemplo: test: /\.html$/ esto quiere decir que le diga a webpack que aplique esta regla si es un archivo con extension html
6. Agregamos const HtmlWebPackPlugin = require('html-webpack-plugin'); que es una manera en que node para cargar estos archivos de otros paquetes
7. Al correr de nuevo 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
8. Si queremos que minifique el codigo, agregamos: minimize: false en la parte de options

9. La 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'

   }),

   ]

   }

10. INSTALAR el servidor de desarrollo de webpack npm i -D webpack-dev-server
11. CONFIGURAR package.json agregando a los scripts "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
12. npm start para correr el servidor de webpack