DEV Community

Fabio Sanchez
Fabio Sanchez

Posted on • Edited on

Configurar Webpack & React Parte 5 - 🖥 Modo desarrollo y dev-server

En esta entrega veremos como generar un versión de nuestro código en modo desarrollo además de instalar un paquete llamado dev-server para correr nuestro proyecto junto un servidor local.

Modo desarrollo

En un tutorial anterior vimos como agregar un comando a nuestro package.json para generar nuestro bundle.js para producción, ahora añadiremos un comando para generar nuestro bundle.js en modo desarrollo, los archivos generados en modo desarrollo no vienen optimizados y la forma mas clara de darse cuenta es por el peso que tienen al no estar minificados, esto es bueno si tienes propósitos de debugueo mientras desarrollas.

Para eso necesitamos editar la sección de scripts de nuestro package.json y escribir lo siguiente "dev": "webpack --mode development" quedando un resultado como el siguiente.

{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }
}
Enter fullscreen mode Exit fullscreen mode

Para probar que todo ha ido bien solo es necesario correr nuestro nuevo comando

npm run dev
Enter fullscreen mode Exit fullscreen mode

Como podemos observar en la siguiente imagen los tamaños de los archivos son mas grandes que cuando es en modo producción.

Alt Text

dev-server

Instalar dev-server es equivalente a tener un servidor local en donde puedes probar tu aplicación, para esto es necesario instalar el siguiente paquete.

npm install --save-dev webpack-dev-server
Enter fullscreen mode Exit fullscreen mode

Una vez instalado el paquete procedemos a agregar el comando que nos permitirá iniciar el servidor local junto nuestro proyecto para esto debemos editar de nuevo el archivo package.json y agregar la siguiente linea "start": "webpack-dev-server --history-api-fallback --open --mode development" en la sección de scripts quedando un resultado como el siguiente.

{
  "name": "webpackreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "dev": "webpack --mode development",
    "start": "webpack-dev-server --history-api-fallback --open --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "html-loader": "^1.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Como paso final solo nos queda probar nuestro nuevo comando

npm run start
Enter fullscreen mode Exit fullscreen mode

El navegador se abrirá automáticamente y veremos algo como la siguiente imagen.

Alt Text

Despedida

Ahora que tenemos cubierto la forma de poder generar y visualizar nuestro proyecto procederemos a poner soporte de estilos e imágenes en la siguiente entrega.

Top comments (0)