Configuración de Webpack para Modo Desarrollo

Contenido del curso

Introducción a Webpack

Proyecto inicial

Loaders y Plugins en Webpack

Deploy del proyecto

Herramientas de desarrollo complementarias

Integración básica de React.js

Próximos pasos

28
Configuración y Uso de Webpack con React
00:48 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:38

Configuración de Webpack para Modo Desarrollo

Curso de Webpack

Clase 15 de 28

Clase 15 / 28

Recursos

¿Cómo configuramos el modo desarrollo en Webpack?

Comenzar con un entorno de desarrollo bien configurado en Webpack nos permite trabajar de manera eficiente y detectar errores más fácilmente. La separación entre el modo desarrollo y producción es crucial para optimizar el flujo de trabajo. Vamos a aprender cómo llevar a cabo esta configuración paso a paso.

¿Qué elementos necesitamos para el modo desarrollo?

Para implementar un modo desarrollo efectivo en Webpack, realizamos ciertas configuraciones y entendemos qué elementos son realmente necesarios en esta etapa:

Archivo de configuración separado: Creamos un archivo denominado webpack.config.dev.js para mantener las configuraciones claras y separadas del modo producción.
Modo específico activado: Especificamos el modo 'development' directamente en el archivo, lo cual le indica a Webpack qué configuraciones específicas utilizar.

¿Cómo creamos y configuramos webpack.config.dev.js?

Copiamos todo el contenido del archivo principal de configuración de Webpack.
Pegamos este contenido en el nuevo archivo webpack.config.dev.js.
Eliminamos las optimizaciones innecesarias para el entorno de desarrollo, como la optimización del JavaScript y CSS.
Especificamos que el modo es development, de la siguiente manera:

module.exports = {
  mode: 'development',
  // Aquí colocamos el resto de la configuración necesaria
};

Esta técnica mejora significativamente la eficiencia durante el desarrollo, ya que se centra en un entorno sin optimizaciones exhaustivas, adecuadas para evaluaciones y debugging.

¿Cómo actualizamos package.json para el modo desarrollo?

Después de configurar el archivo webpack.config.dev.js, procedemos a actualizar el package.json para que utilice este archivo durante la ejecución en modo desarrollo:

En la sección de scripts, especificamos el archivo de configuración que debe ser utilizado:

"scripts": {
  "dev": "webpack --config webpack.config.dev.js"
}

Ejecutamos nuestro script con el comando:

npm run dev

¿Por qué es esto beneficioso?

Este enfoque permite no solo múltiples configuraciones para diferentes entornos, sino también un proceso de desarrollo más veloz:

Rápida construcción: Webpack optimiza la construcción más rápidamente cuando se encuentra en modo desarrollo ya que no ejecuta técnicas de minificación y otras optimizaciones pesadas.
Visibilidad del código: Podemos depurar y entender mejor el código ya que está en un formato más legible para los humanos, en comparación con el código altamente optimizado y minificado.

Al implementar estas configuraciones, estamos equipados para avanzar de manera más eficaz en el desarrollo de nuestras aplicaciones, permitiendo pruebas y ajustes más ágiles y potentes. Sigue progresando en tu viaje de aprendizaje y descubre cómo implementar estas configuraciones en tus propios proyectos.

Leobardo Licona Soto

Hace 5 años

Guide Webpack Development Mode

1.- Crea el archivo webpack.config.dev.js 2.- Copia el código de tu archivo webpack.config.js a excepción de los módulos de optimización

const CssMinimizerPlugin = require(‘css-minimizer-webpack-plugin’);
const TerserPlugin = require(‘terser-webpack-plugin’);

optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin(),
    ]
  }

3.- Se agrega el la línea de código mode: development:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    assetModuleFilename: 'assets/images/[hash][ext][query]'
  },

// Agregamos: mode: 'development'
  mode: 'development',

4.- En package.json le decimos que utilice este documento para el modo desarrollo

"dev": "webpack --config webpack.config.dev.js",

Comentarios (22)22 comentarios

Fernando Quinteros Gutierrez

Hace 6 años

Carlos Velasquez

Christian Velázquez

Paolo Joaquin Pinto Perez

Alonso Fabricio Samanez Nuñez

Andres Felipe Pinchao Ramirez

Reinaldo Mendoza

Jose Anibal Garcia Giraldo

Platzi Team

Albert K. Camargo Barreda

Andres Gallego

Jorge De Jesus Tejeda Bello

Romen Ter Gazarian

Joel Eduardo Sánchez Herrera

David Campos

Edgar Lopez Arroyo

Juan Pablo Jimenez

Diego Reyes

Hace 3 años

jose luis gomez angarita

Hace 4 años

John Malku Córdova Sinchico

Aitor Santana Cabrera

Francisco Ponce

Naldo Duran

Jimer Samuel Espinoza

Sergio Morgan

Juan David Moreno Rodriguez

Gisela Angela Cristaldo

Adriel Francesco Pezo Vizcarra

Introducción a Webpack

Curso Avanzado de Webpack para Producción Web

Configuración y uso de Webpack para proyectos JavaScript modernos

Proyecto inicial

Configuración y Uso de Webpack en Proyectos JavaScript

Optimización de Proyectos Web con Webpack para Producción

Configuración básica de Webpack para proyectos JavaScript

Loaders y Plugins en Webpack

Integración de Babel y Webpack para compatibilidad JavaScript

Configuración de HTML-webpack-plugin en Webpack

Configuración de Webpack para CSS y Preprocesadores

Uso de Copy Webpack Plugin para Mover Archivos en Proyectos Node.js

Importación de Imágenes con Webpack Asset Module

Optimización de Fuentes Locales con Webpack

Optimización de Proyectos con Webpack: Minificación y Hashing

Alias en Webpack: Simplifica la Importación de Módulos

Deploy del proyecto

Variables de Entorno en Webpack para Proyectos Seguros

Configuración de Webpack para Modo Desarrollo

Configuración de Webpack para Producción y Limpieza de Builds

Activar Watch Mode en Webpack para Desarrollo y Producción

Despliegue de Proyectos Web con Netlify y GitHub

Herramientas de desarrollo complementarias

Configuración de Webpack Dev Server para Desarrollo Local

Análisis de Dependencias con WebPath Bundle Analyzer

Uso de Source Maps en Webpack para Depuración de Código

Integración básica de React.js

Configuración de Webpack y React desde Cero para Producción

Configuración de Webpack en Proyecto React con Babel y JSX

Configuración de Webpack para Proyectos HTML y Servidor Local

Configurar CSS y SaaS en React con Webpack

Configuración de Webpack para Producción en React

Despliegue de Aplicaciones React en Netlify

Próximos pasos

Configuración y Uso de Webpack con React

Configuración de Webpack para Modo Desarrollo