text: // Para trabajar con archivos y rutas de directorios
  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const CopyPlugin = require('copy-webpack-plugin');
  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  const TerserPlugin = require('terser-webpack-plugin');
  const Dotenv = require('dotenv-webpack');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
  module.exports = {
      // Punto de entrada de nuestra aplicacion
      entry: './src/index.js',
      // Hacia donde vamos a enviar lo que prepare webpack
      output: {
          // Saber en que directorio se encuentra nuestro proyecto
          path: path.resolve(__dirname, 'dist'),
          // resolve lo que hace es darnos la ruta absoluta de el S.O hasta nuestro archivo
          // para no tener conflictos entre Linux, Windows, etc
          filename: '[name].[contenthash].js',
          // EL NOMBRE DEL ARCHIVO FINAL,
          assetModuleFilename: 'assets/images/[hash][ext][query]'
      },
  
      resolve: {
          // LOS ARCHIVOS QUE WEBPACK VA A LEER
          extensions: ['.js'],
          alias: {
              '@utils': path.resolve(__dirname, 'src/utils/'), 
              '@templates': path.resolve(__dirname, 'src/templates/'),
              '@styles': path.resolve(__dirname, 'src/styles/'),
              '@images': path.resolve(__dirname, 'src/assets/images/'),
          }
      },
  
      module: {
          // REGLAS PARA TRABAJAR CON WEBPACK
          rules: [
              {
                  test: /\.m?js$/, // LEE LOS ARCHIVOS CON EXTENSION .JS,
                  exclude: /node_modules/, // IGNORA LOS MODULOS DE LA CARPETA
                  use: {
                      loader: 'babel-loader'
                  }
              },
  
              {
                  test: /\.s?css$/,
                  use: [MiniCssExtractPlugin.loader,
                      'css-loader',
                      "sass-loader"
                  ],
              },
  
              {
                  // REGLA PARA ACEPTAR IMAGENES .PNG
                  test: /\.png/,
                  type: 'asset/resource'
              },
  
              {
                  test: /\.(woff|woff2)$/, // REGLA PARA ARCHIVOS WOFF | WOFF2
                  use: {
                      loader: 'url-loader', // NOMBRE DEL LOADER
                      options: {
                          limit: false, // O LE PASAMOS UN NUMERO
                          // Habilita o deshabilita la transformación de archivos en base64.
                          mimetype: 'aplication/font-woff',
                          // Especifica el tipo MIME con el que se alineará el archivo. 
                          // Los MIME Types (Multipurpose Internet Mail Extensions)
                          // son la manera standard de mandar contenido a través de la red.
                          name: "[name].[contenthash].[ext]",
                          // EL NOMBRE INICIAL DEL PROYECTO + SU EXTENSIÓN
                          // PUEDES AGREGARLE [name]hola.[ext] y el output del archivo seria 
                          // ubuntu-regularhola.woff
                          outputPath: './assets/fonts/',
                          // EL DIRECTORIO DE SALIDA (SIN COMPLICACIONES)
                          publicPath: '../assets/fonts/',
                          // EL DIRECTORIO PUBLICO (SIN COMPLICACIONES)
                          esModule: false
                      }
                  }
              }
  
          ]
      },
  
      plugins: [
          new HtmlWebpackPlugin({
              inject: true,
              template: './public/index.html',
              filename: './index.html',
          }),
  
          new MiniCssExtractPlugin({
              filename: 'assets/[name].[contenthash].css'
          }),
  
          new CopyPlugin({
              patterns: [
                  {
                      from: path.resolve(__dirname, "src", "assets/images"),
                      to: "assets/images"
                  }
              ]
          }),
  
          new Dotenv(),
          new CleanWebpackPlugin(),
      ],
  
      optimization: {
          minimize: true,
          minimizer: [
              new CssMinimizerPlugin(),
              new TerserPlugin()
          ]
      }
  
  }
  
  