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.
Top comments (0)