No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Configuraci贸n de webpack

6/23
Recursos

Aportes 9

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榩aquetes鈥 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.

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 = \

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',
        })
    ]
}
Les comparto este recurso para que puedan crear sus archivos .gitignore <https://www.toptal.com/developers/gitignore> crean el archivo .gitignore y luego pegan es resultado de la pagina 馃馃徏

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 + 陋 )