Herramientas de Build

Webpack, Vite, Babel y herramientas de bundling

Preguntas de Entrevista sobre Herramientas de Build

Domina las herramientas de build modernas para desarrollo frontend.

1. Webpack Conceptos Básicos

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

2. Vite - Build Tool Moderno

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
});

Mejores Prácticas

✓ Usa code splitting para reducir bundle inicial
✓ Implementa tree shaking
✓ Minimiza y comprime assets
✓ Usa source maps en desarrollo
✓ Cachea dependencias estables