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"
  }
}

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

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.

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

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"
  }
}

Como paso final solo nos queda probar nuestro nuevo comando

npm run start

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

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.