Introducción al paquete de módulos Webpack

Webpack: Webpack es un paquete de módulos estáticos que se utiliza para aplicaciones de JavaScript. Dado que el paquete web solo comprende archivos JavaScript y JSON, transforma los activos frontales como HTML, CSS e imágenes en módulos válidos si se incluyen los cargadores correspondientes. Al procesar su aplicación, el paquete web crea internamente un gráfico de dependencia que asigna cada módulo que su proyecto necesita y produce uno o más paquetes de salida.

Algunos conceptos básicos de webpack son:

1. Entrada
2. Producción
3. Cargadores
4. Complementos
5. Modo

Entrada: un punto de entrada define qué módulo debe usar el paquete web para comenzar a construir su gráfico de dependencia interna. El valor predeterminado del punto de entrada es ./src/index.js , pero en la configuración del paquete web, puede especificar un punto de entrada diferente o múltiple configurando una propiedad de entrada dentro de este archivo.

Consideremos un ejemplo en el que file.js dentro del directorio GeeksForGeeks es el punto de entrada. Luego, el archivo webpack.config.js debería ser el siguiente:

Nombre de archivo: webpack.config.js

module.exports = {
 entry: './GeeksForGeeks/file.js'
};

Salida: la propiedad de salida indica el paquete web donde emitir los paquetes que crea y le indica la forma de nombrar estos archivos. Por defecto, su valor es ./dist/main.js para el archivo de salida principal y es la carpeta ./dist para cualquier otro archivo generado, pero podemos cambiar esta parte del proceso especificando un campo de salida en nuestra configuración.

Nombre de archivo: webpack.config.js

const path = require('path');
module.exports = {
 entry: './GeeksForGeeks/file.js',
 output: {
   path: path.resolve(__dirname, 'gfg'),
   filename: 'GeeksForGeeks-webpack.bundle.js'
 }
};

Cargadores: dado que el paquete web solo comprende archivos JavaScript y JSON. Los cargadores procesan otros tipos de archivos y luego los convierte en módulos válidos que nuestra aplicación puede consumir y los agrega al gráfico de dependencia.

Los cargadores preprocesan el otro tipo de archivos y los agregan al paquete. Los cargadores tienen dos propiedades en la configuración del paquete web a través de las cuales logran esto:

1. La propiedad de prueba
2. La propiedad de uso

La propiedad de prueba: Se utiliza para identificar qué archivo o archivos deben ser transformados por el cargador respectivo. Por lo general, se utiliza una expresión regular para identificar el archivo o los archivos que deben transformarse.

La propiedad use: se usa para indicar qué cargador se debe usar para hacer la transformación.

Nombre de archivo: webpack.config.js

const path = require('path');
module.exports = {
 output: {
   filename: 'GeeksForGeeks-webpack.bundle.js'
 },
 module: {
   rules: [
     { test: /\.txt$/, use: 'raw-loader' }
   ]
 }
};

La configuración del paquete web anterior ha definido una propiedad de reglas para un módulo con dos propiedades requeridas que son prueba y uso . Cuando el compilador del paquete web encuentra una ruta que se resuelve en un archivo ‘.txt’ dentro de una instrucción require()/import, utilizará el cargador sin procesar para transformarlo antes de agregarlo al paquete.

Complementos: mientras que los cargadores se usan para preprocesar ciertos tipos de módulos, los complementos se pueden usar para llevar a cabo una gama más amplia de tareas, como una inyección de variables de entorno, gestión de activos y optimización de paquetes.

Para usar un complemento, tenemos que require() y agregarlo a la array de complementos. Los complementos se pueden personalizar a través de opciones. Dado que un complemento se puede usar varias veces en una configuración para diferentes propósitos, necesitamos crear una instancia de él llamándolo con el nuevo operador.

Nombre de archivo: webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
 module: {
   rules: [
     { test: /\.txt$/, use: 'raw-loader' }
   ]
 },
 plugins: [
   new HtmlWebpackPlugin({template: './src/GeeksForGeeks.html'})
 ]
};

En el ejemplo anterior, el html-webpack-plugin se usa para generar un archivo HTML para nuestra aplicación al inyectar todos nuestros paquetes generados automáticamente.

Modo: podemos habilitar las optimizaciones integradas de webpack que corresponden a cada entorno configurando el parámetro de modo en desarrollo, producción o ninguno. Su valor por defecto es la producción.

Nombre de archivo: webpack.config.js

module.exports = {
 mode: 'development'
}