Configuración de webpack

Les dejo los paquetes a instalar 😀

npm i html-webpack-plugin copy-webpack-plugin @babel/core babel-loader - D

Les comparto los conceptos de webpack que pueden encontrar en su documentación oficial
.

Conceptos de webpack

.

Entry

.
Un entry point indica qué módulo webpack debería empezar a utilizar para empezar a construir el gráfico de dependencias.
.
Webpack luego se encargará de verificar qué otros módulos y librerías aquel punto de entrada depende de (directa o indirectamente).

Por defecto, su valor es ./src/index.js, pero se puede especificar otro, o múltiples, punto de entrada:

//webpack.config.js
module.exports = {
	entry: './src/index.js'
}

.

Output

.
La propiedad output le indica a webpack hacia dónde cargar los ‘paquetes’ ya creados y cómo deberían llamarse. Por defecto, los paquetes tendrán el nombre de main.js y se cargarán en la carpeta ./dist:

//webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	}
}

path es un módulo de node.js que nos permite manipular los paths de los archivos.
.

Loaders

.
Por defecto, Webpack solamente entiende archivos .js y .JSON. Los loaders nos permiten especificar otro tipo de archivos para que webpack los pueda procesar y convertir en módulos válidos que pueden ser consumidos por nuestra aplicación y ser añadidos en el gráfico de dependencias.
.
Los loaders tienen tres propiedades:

• test: identifica cuál o cuáles archivos serán transformados.
• use: indica cuál loader debería ser utilizado para transformar los archivos.
• exclude: indica archivos o carpetas que deberían ser ignoradas por el loader

//webpack.config.js
const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	modules: {
		rules: [{test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/}]
	}
}

.

Plugins

.
Los plugins son similares a los loaders pero nos permiten hacer cosas que no podríamos con los loaders, como optimización de los paquetes, inyección de variables y manejo de activos.

Para usar plugins, necesitamos traerlos con require() para agregarlos al array de plugins. Como podemos usar un mismo plugin con diferentes configuraciones para distintos propósitos, necesitamos crear instancias de los plugins utilizando el operador new.

//webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'main.js'
	},
	modules: {
		rules: [{test: /\.ts?$/, use: 'ts-loader', exclude: /node_modules/}]
	},
	plugins: [new HtmlWebpackPlugin({ template: './src/index.html'})]
}

Existe una gran cantidad de plugins que webpack nos provee. Acá una lista de plugins
.

Mode

.
Al colocar la propiedad mode en development, production o none, podemos activar las optimizaciones internas de webpack dependiendo del valor de mode que hayamos especificado. El valor por defecto es production.

Aca dejo el codigo de la clase por si tienen algun error con typos

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    resolve: {
        extensions: ['.js']
    },
    module: {
        rules: [ 
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: true,
            template: './public/index.html',
            filename: './index.html',
        })
    ]
}

Mucha información en poco tiempo estoy mareado!

Este archivo de configuración define las siguientes opciones:

entry: Especifica el archivo de entrada de su aplicación, en este caso ./src/index.js
output: Especifica la ruta de salida y el nombre del archivo empaquetado, en este caso el archivo se llama bundle.js y se encuentra en la carpeta /dist
module: Especifica las reglas para los módulos, en este caso se establece que todos los archivos .js deben ser procesados por babel-loader y los archivos .css deben ser procesados por style-loader y css-loader
plugins: Especifica los plugins a utilizar, en este caso se utiliza HtmlWebpackPlugin para generar un archivo HTML a partir de una plantilla ./src/index.html
Ten en cuenta que para que este código funcione, tendrás que tener instaladas las dependencias necesarias, como babel-loader, html-webpack-plugin y css-loader.

/ \

alt + 92 = \

Resolve.extensions

Esta configuración nos permite importar archivos sin especificar su extensión, algo así como:

import func from "./../functions/sayHi";

En verdad el archivo se llama sayHi.js, pero le estoy encargando a Webpack que resuelva la extensión por mí.
.
Un dato importante es que, Webpack resolverá la primera coincidencia en el array que le pasemos a resolve.extensions.
.
Por ejemplo, si tenemos estos dos archivos sayHi.css sayHi.js en la misma carpeta; y a resolve.extensions le pasamos el array [.js, .css]; si hacemos un import sin especificar la extension del archivo, como a continuacion:

import file from "./../folder/sayHi";

Webpack nos importará el archivo sayHi.js, dada la configuración de mi ejemplo.

si tu teclado tiene la tecla de la A chiquita ª al lado del número 1 entonces esa es la de la barra invertida \ ( AltGr + ª )