Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Clase 11 de 29 • Curso Práctico de React JS 2019

Resumen

Instalación de Webpack Dev Server:

npm install --save-dev webpack-dev-server

Script para ejecutar el servidor de Webpack y visualizar los cambios en tiempo real (package.json):

{
  ""scripts"": {
    ""build"": ""webpack --mode production"",
    ""start"": ""webpack-dev-server --open --mode development""
  },
}

Leonel Moyano

student•

**Error: Cannot find module 'webpack-cli/bin/config-yargs' ** Solución

La nueva versión de webpack no soporta

"webpack-dev-server --open --mode development"

Tienen que reemplazar

"start": "webpack-dev-server --open --mode development"

Por:

"start": "webpack serve --mode development --env development"

El código les quedaria así:

{
  "name": "PlatziVideo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack serve --mode development --env development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.0",
    "@babel/preset-env": "^7.12.0",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.1.2",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  }
}

Fuente:

Leonel Moyano

student•

Fuente: https://github.com/webpack/webpack-dev-server/issues/2759

Jose Luis Corado Canizalez

student•

Afirmativo!

Rex Guzmán

student•

Para ver tu proyecto desde tu celular:

Si agregas --host 0.0.0.0 (sustituye 0.0.0.0 por tu dirección IP que puedes ver en la configuración de tu red) al script start, puedes acceder desde otros dispositivos al proyecto. Por ejemplo:

"start": "webpack-dev-server --open --mode development --host 192.168.1.101"

Ahora al ejecutar npm run start tu proyecto se puede visualizar desde otros dispositivos conectados a tu red con la dirección IP. Por ejemplo:

http://192.168.1.101:8080/

Brayhan Andres Jaramillo Castaño

student•

Genial

Felix Franck Bravo Arevalo

student•

Buen Dato!!, Gracias!!!!

David Alejandro Mosquera Moreno

student•

Para HTML = usar ( ) Para Lógica = usar { }

Markoz Peña Mendez

student•

**No es HTML **, desde ahi vamos mal. Es JSX que eso quitandole la transpialacion de babel no es mas que un objecto que servira para construir el DOM

Jesus Espino

student•

En realidad lo que sucede es que en la arrow function si decides poner las llaves, entonces necesitas poner el return de manera explícita. Si no pones llaves y solo una expresión, entonces se infiere que se retorna el valor de dicha expresión.

Pd: los paréntesis en este caso son opcionales.

Gonzalo Pimentel

student•

Para los que les salió este warning:

La solución es ir a settings de devtools (la ruedita) y desactivan el Enable JavaScript source maps:

Y listo:

Jimmy Buriticá Londoño

student•

Muchas gracias, llevaba tiempo buscando la solución.

Manuel Entrena Jimenez

student•

Grande!

Alejandro Silva Berbesi

student•

detalle = error 😄

Gustavo Adolfo Ramírez Apache

student•

Si alguien está viendo el curso en estos momentos el comando correcto para ejecutar el codigo en desarrollo ha cambiado.

webpack serve --mode development --env development

Luis umana briceno

student•

Gracias por la información

DAYAN MANRIQUE

student•

salvando vidas

Cesar Augusto Barco de Gouveia

student•

Acá está la recolección de notas e información conseguida en Internet para complementar este curso.

Si ayudas a agregar información o investigación extra estaría genial.

webpack-dev-server

Use webpack con un servidor de desarrollo que proporcione recarga en vivo. Esto debe usarse solo para el desarrollo .

Utiliza webpack-dev-middleware debajo del capó, que proporciona acceso rápido en memoria a los activos del paquete web.

Empezando

Primero lo primero, instale el módulo:

npm install webpack-dev-server --save-dev

Nota: Si bien puede instalar y ejecutar webpack-dev-server a nivel mundial, recomendamos instalarlo localmente. webpack-dev-server siempre usará una instalación local sobre una global.

Uso

Hay dos métodos principales recomendados para usar el módulo:

Con la CLI

La forma más fácil de usarlo es con la CLI. En el directorio donde webpack.config.jsestá, ejecute:

node_modules / .bin / webpack-dev-server

Nota : Muchas opciones de CLI están disponibles con webpack-dev-server. Explore este enlace .

Con scripts NPM

Los scripts package.json de NPM son un medio conveniente y útil para ejecutar binarios instalados localmente sin tener que preocuparse por sus rutas completas. Simplemente defina un script como tal:

" scripts " : { " start: dev " : " webpack-dev-server " }

Y ejecute lo siguiente en su terminal / consola:

npm run start: dev

NPM hará referencia automática al binario node_modulespara usted y ejecutará el archivo o comando.

El resultado

Cualquiera de los métodos iniciará una instancia del servidor y comenzará a escuchar las conexiones desde localhostel puerto 8080.

webpack-dev-server está configurado de manera predeterminada para admitir la recarga en vivo de archivos mientras edita sus activos mientras el servidor se está ejecutando.

Consulte la documentación para obtener más casos de uso y opciones.

Daniel González

student•

Puedes agregar el flag --host en el script y enseguida la ip de tu ordenador y así poder acceder a tu proyecto desde tu movíl, siempre y cuando este conectado a la misma red.

Mario Alejandro Crespo Reyes

student•

Dure como 15 min buscando mi error y era que estaba importando

import ReactDom from 'react-dom'

y era

import ReactDOM from 'react-dom'

Cuidado con los typos, supongo que a todos nos pasa o eso quiero pensar.

Alejandro Benjumea Aguirre

student•

para configurar el puerto donde va a correr la aplicación en el archivo de webpack.config.js se debe de adicionar al final las siguientes lineas.

devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3000
    }

El código debe de quedar de la siguiente manera:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './public/index.html',
            filename: './index.html'
        }),
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3000
    }
};

Víctor Rolack

student•

Gracias por tanto, perdón por tan poco!

Sebastián Rodrigo Díaz

student•

Tuve muchos problemas con webpack debido a que no se refrescaba automaticamente cada vez que cambiaba un .js. Lo que hice fue agregar la siguiente configuración al "webpack.config.js" :

devServer: {
    open: true,
    
    watchOptions:{
        poll: true,
        ignored: "/node_modules/"
    }
  }

Para que el archivo quedara así finalmente:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: {
          loader: "html-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    })
  ],
  devServer: {
    open: true,
    
    watchOptions:{
        poll: true,
        ignored: "/node_modules/"
    }
  }
};

fuente: https://chadrick-kwag.net/webpack-dev-server-live-reloading-not-working-fix/

Lucas Madrigal Beltran

student•

gracias amigo compadre viejito cuate...

Luis umana briceno

student•

Gracias tenia el mismo problema.

David Velarde

student•

Si alguien quiere que tambien se le abra el navegador cuando corra el "webpack serve" como ya algunos compas mencionaron, solo deben ir al webpack.config.js y debajo (no dentro) de "plugins" deben agregar otro objeto:

plugins: [
        new HtmlWebPackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ],
    devServer: {
        open: true
    }

Fredy Frasser

student•

Excelente David muchas gracias, buen aporte.

Wilson Fernando Antury Torres

student•

Ha sido difícil instalar todo en mi máquina, pero finalmente todo funcionando.

Pablo Coto

student•

Solucionar rápido el problema con webpack-dev-server y webpack-cli para continuar con el proyecto

Desinstalar paquetes:

npm uninstall webpack-cli webpack-dev-server

Instalar paquete de webpack-cli compatible con el proyecto del profesor

npm install webpack-cli@3.3.9 webpack-dev-server --save-dev

Problema identificado: Versión del paquete webpack-cli actual es superior al la versión 4 y para correr el webpack-dev-server se necesita una menor. Por lo tanto hay que instalar webpack-cli@3.3.9 para continuar.

Alternativas: webpack-serve utilizando webpack-plugin-serve

Wilmar Yoan Malaver Malaver

student•

no lo hice como tú por que no había visto el comentario pero hice algo parecido, instale webpack y webpack-cli de las siguientes versiones y me corrio bien.

npm install webpack@4.44.1 webpack-cli@3.3.12 --save-dev

Facundo Victor Scienza

student•

grraaaaciaaaaaaaas

Guillermo Loza Hernandez

student•

2:26 En mi caso también me funcionó así:

const HelloWorld = () => <h1>Holamundo</h1>;

Oscar Barajas Tavares

Team Platzi•

Es una solución que funciona y podemos utilizar nuestros componentes presentaciones según necesitemos.

luis carlos jimenez manga

student•

yo lo tengo de esta manera y me funciono, estoy retornando el html

const HelloWorld =() =>{ return( <h1>Hola mundo</h1> ); }

solo faltaba retornar

Andrés Felipe Eslava Zuluaga

student•

Del profesor Óscar aprendí que si únicamente se va a devolver HTML, entonces se usan paréntesis al definir la Arrow Function:

const HelloWorld = () => (
    <h1>Un mundo de Javascript</h1>
)

Si se desea devolver algo que tuvo un proceso de lógica dentro de la función, entonces se utilizan llaves:

const HelloWorld = () => {
    /**  Cosas para hacer dentro de la función */
    console.log('Dentro de la función ocurre lógica, pero yo sólo quiero devovler lo que resulta de todo eso')
    return (
        <h1>El resultado que quiero arrojar</h1>
    )
}

Así se optimiza el uso y se usa correctamente cada definición de funciones.

Markoz Peña Mendez

student•

Chicos** no retorna HTML**, retorna un JSX que al final es un objecto que se usara para construir el DOM

Alexis Morales

student•

Hola amigos, por si le sale este error a alguno de ustedes:

La solucion que me funciono a mi fue modificar el script del package.json:

Jhon Faber Grisales Rodriguez

student•

Gracias por el aporte!!

Juan Sebastian Tello Quinteros

student•

Espero les ayude Cuando yo use el comando npm run start me lanzaba el siguiente error hasta que me di cuenta que tenia un puerto en conflicto. Lo que hize fue cambiar a otro puerto para iniciar el servidor. Solo actualice un poco en webpack.config.js:

En el webpack.config.js

<  devServer: {
    historyApiFallback: true,
    contentBase: './',
    port: 3000 // <--- Add this line and choose your own port number
  }>

Maided Guadalupe Hernández Ponce

student•

¡Gracias!

Karen Paola Diaz Duarte

student•

practica:

Andrés Felipe Lopez gomez

student•

Gracias salvaste la noche

bruno guerra solano

student•

buenas tengo un problema porque es tan jodidamente dificil el hacer un proyecto con react y no por la parte de usar react si no por la parte de dejar el entorno a punto en cada proyecto que tengo que hacer 🤬 llevo ya 2 dias intentando tener mi entorno listo no se si es por las actualizaciones de dependecias que no me sale lo mismo que sale en los videos de los cursos que tiene que ver relacionado con webpack o react y cuando uso react-app no compila el trabajo para mandarlo a produccion si no rompo la computado es porque es la única que tengo, que frustración

Carlos Guillermo Coello Valenzuela

student•

podrías mandar el repo donde tienes es código para darle un vistazo y ver que te podría estar pasado jeje

Ernán Alexander Velásquez Ramírez

student•

Te entiendo, me pasa lo mismo. Me pasó al configurar webpack. Tuve que hacerlo dos veces desde 0 para que me funcionara. Tuve que ir parte por parte, compilando, investigando sobre los errores en foros, hasta que lo logré.

Todo se trata de no rendirse.

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

¿Qué es React JS?

Aprende qué es React.js

DOM, Virtual DOM y React DOM

Crear una Aplicación con React JS

Create React App y Tipos de Componentes

JSX: JavaScript + HTML

Props: Comunicación entre Componentes

¿Qué son los métodos del ciclo vida?

State - Events

Instalación y configuración de entorno

Agregando compatibilidad con todos los navegadores usando Babel

Configurar un entorno de trabajo profesional

Webpack: Empaquetando nuestros módulos

Webpack Dev Server: Reporte de errores y Cambios en tiempo real

Estilos con SASS

Configuración final: ESLint y Git Ignore

Arquitectura de componentes para Platzi Video

Llevar un diseño de HTML y CSS a React

Estructura del Header

Estilos del Header

Estructura y Estilos del Buscador

Estructura y Estilos de Carousel y Carousel Item

Estructura y Estilos del Footer

Añadiendo imágenes con Webpack

Imports, Variables y Fuentes de Google en Sass

Uso de una API de desarrollo (Fake API)

Creando una Fake API

React Hooks: useEffect y useState

Lectura React Hooks

Conectando la información de la API

Custom Hooks

PropTypes

Usar React Tools

Debuggeando React con React DevTools

Prepárate para lo que sigue