Configurar Webpack & React Parte 5 - 🖥 Modo desarrollo y dev-server
Tags: javascript, react, webpack, webdev
Published: 2020-07-03 01:27:22

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.

```json
{
  "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"
  }
}
```

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

```bash
npm run dev
```
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](https://dev-to-uploads.s3.amazonaws.com/i/4hkbnkqe0y3vlc8lq9g0.png)

## 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.

```bash
npm install --save-dev webpack-dev-server
```

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.

```json
{
  "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"
  }
}
```

Como paso final solo nos queda probar nuestro nuevo comando

```bash
npm run start
```

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2va378l4izlnb69frulm.png)

## 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.