No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

2 D铆as
11 Hrs
59 Min
29 Seg
Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Webpack Dev Server

19/28
Recursos

Aportes 40

Preguntas 21

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Actualmente Webpack Dev Server ha cambiado un poquito algunas de sus opciones estan deprecadas, la documentacion oficial parace que no ha sido actualizada, sin embargo los cambios son peque帽os:

.
Asegurense de cambiar la propiedad contentBase por static, de este modo:

devServer: {
		static: path.join(__dirname, 'dist'),
		compress: true,
		historyApiFallback: true,
		port: 8080,
		open: true,
	}

.
Por convencion, el archivo html raiz que las tecnologias buscan se llama index.html, entonces verifiquen que su html resultante en la carpeta dist, lleve ese nombre para que se le sea facil encontrarlo.

plugins: [
		new HtmlWebpackPlugin({
			inject: 'body',
			template: './public/index.html',
			filename: './index.html',
		}),
	],

.
Finalmente el script en el package.json lo corren sin problemas:

	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "node ./scripts/create-env.js && webpack --config webpack.config.js",
		"dev": "webpack --config webpack.config.dev.js",
		"watch": "webpack --config webpack.config.dev.js --watch",
		"start": "webpack serve --config webpack.config.dev.js"
	},

Hola , vengo del a帽o 2021 mes de octubre, y el webpack-dev-server no me recargaba automaticamente el navegador, resulta que se actualizo la documentaci贸n y ahora no viene por defecto esta funcionalidad, por lo que agregu茅 unas lineas de codigo para arreglarlo:

link documentaci贸n webpack-dev-server

Antes

devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        historyApiFallback: true,
        port: 3006,
        open: true,  //Hace que se abra en el navegador
    }
}

Despues

devServer: {
    static: 
    {
      directory: path.join(__dirname, "dist"),
      watch: true,
    },
    watchFiles: path.join(__dirname, "./**"), //observa los cambios en todos nuestros archivos y actualiza el navegador
    compress: true,
    historyApiFallback: true,
    port: 3006,
    open: true, //Hace que se abra en el navegador
    
  },

tambi茅n pueden agregar el siguiente c贸digo

open: true

y se abrir谩 en el navegador autom谩ticamente

馃嵃 Webpack Dev Server

<h4>Ideas/conceptos claves</h4>

HTML5 History API permite la manipulaci贸n de session history del navegador, es decir las p谩ginas visitadas en el tab o el frame en la cual la p谩gina est谩 cargada.

<h4>Recursos</h4>

How To Optimize Your Site With GZIP Compression

<h4>Apuntes</h4>
  • Cuando trabajamos con webpack deseamos ver los cambios en tiempo real en un navegador
  • Para tener esta caracter铆stica esta webpack-dev-server
  • Para ello debemos instalarlo

NPM

npm install -D webpack-dev-server

Yarn

yarn add -D webpack-dev-server
  • Posteriormente debemos agregar la siguiente configuraci贸n en webpack.config.dev.js
    • Lo hacemos en la configuraci贸n de desarrollo debido a que esta caracter铆stica solo nos ayudara a ver cambios al momento de desarrollar la aplicaci贸n
module.exports = {
	...
	devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    port: 3000,
  }
}
  • En la configuraci贸n podemos observar lass siguientes propiedades
    • contentBase 鈬 Le dice al servidor donde tiene que servir el contenido, solo es necesario si quieres servir archivos est谩ticos
    • compress 鈬 Habilita la compresi贸n gzip
    • historyApiFallback 鈬 cuando estas usando HTML5 History API la p谩gina index.html sera mostrada en vez de una respuesta 404
    • Port 鈬 es el puerto donde vamos a realizar las peticiones
  • Para comenzar a utilizarlo debes agregar el siguiente script a package.json
{
	...
	"scripts": {
	...
	"start": "webpack serve --config webpack.config.dev.js"
	}
}

No me funcion贸 y me daba pantalla blanca por un momento, luego encontr茅 que el script para generar el .env se ejecut贸 y dej贸 en undefined el valor de la url API, por si alguien tiene el mismo inconveniente

API=https://randomuser.me/api/

Al usar contentBase me daba un error y el servidor no corria. Tuve que reemplazarlo por static

 devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    port: 3006,
    open: true
  }

les recomiendo leer la nueva documentaci贸n de webpack para el 2022 aun as铆 dejo ac谩 mi configuraci贸n en webpack.config.dev.js

    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),
            watch: true
        },
        watchFiles: path.join(__dirname, "./**"), 
        compress: true,
        historyApiFallback: true,
        port: 3006,
        open: true, 
    },

Para quienes tengan este error

Prueben cambiando la siguiente linea en el archivo webpack.config.dev.js. Donde dice:

contentBase: path.join(__dirname, 'dist'),

Reemplazar por:

static: path.join(__dirname, 'dist'),

Al menos, a mi mi funcion贸

ctrl + L, limpia la consola, mas rapido que escribir clear

Cuando trabajamos con webpack queremos ver los cambios en tiempo real, tener un servidor de desarrollo local, esto se puede con webpack dev server, solo tenemos que instalarlo:

npm install webpack-dev-server -D

Ya instalado lo vamos a configurar unicamente en el modo desarrollo. Al final solo agregamos la configuracion:

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

Ahora agregamos la configuracion en nuestro package asi:

"start" : "webpacl serve --config webpack.config.dev.js",

El modo watch debe de estar desactivado.

Actualmente hay que agregar dos lineas de c贸digo mas y remplazar la palabra **contentBase **con static

static: path.join(__dirname, 'dist'),//cambio de palabra contentBase 
watchFiles: path.join(__dirname, "./**"), //para recargar el navegador autom谩ticamente
open: true //abrir el navegador al correr el script

A d铆a 25/03/2022 la configuraci贸n con la que me funcion贸 correctamente es:

package.json

 "start": "webpack serve --config webpack.config.dev.js"  },

webpack.config.dev.js

...

plugins: [
    new HtmlWebpackPlugin({
      inject: 'body',
      template: './public/index.html',
      filename: './index.html'
    })

...

devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
  },

NOTAS SOBRE ERRORES

Si te aparece este error:

Ve a la documentaci贸n oficial de devServe: https://webpack.js.org/configuration/dev-server/, al d铆a de hoy este error se puede solucionar de la sigueinte manera:

devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true, 
    historyApiFallback: true,
    port: 3006,
  },

驴Qu茅 diferencia habr铆a entre el script dev y el de start? Veo que ambos son para entornos de desarrollo. No se deber铆a dejar 1 de los 2? O se mantienen los dos a manera de ejemplo.

Si te arroja un arroja en la terminal y est谩s viendo esto despu茅s del diciembre 2022. Esta es la sintaxis de DevServer 鈥

module.exports = {
...
 devServer: {
    static: {
      directory: Path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 8000,
   },
}

}

Esta es documentaci贸n

Chicos a mi me salia este error por la ultima actualizacion de Webpack v5, la solucion se la dejo mas abajo 鈥

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
options has an unknown property 鈥榗ontentBase鈥. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

Solamente hay que cambiar contentBase(ha quedado obsoleto) por static

Si lo estas viendo antes de que salga el nuevo curso de empaquetadores del 2022 y te da errores por la culpa de los cors, ve al codigo de getData en las utilerias y el fetch haz lo siguiente

const response = await fetch(apiURl,{
      mode:'cors'
    });

Que diferencias hay entre usar live server con el index.html que se genera con nuestro comando webpack watch y usar esta dependecia?

peque帽o tip, note que aunque webpack este escuchando si recompila tu proyecto pero tu debes recargar para ver los cambios si se quieren evitar esto a帽adan en la configuracion de dev server lo siguiente :

liveReload: true,

de tal forma que quede as铆:

    devServer:{
        static: path.join(__dirname, 'dist'),
        compress:true,
        historyApiFallback:true,
        port:3006,
        watchFiles: path.join(__dirname, 'src'),
        liveReload: true,
    },

Dev Server

npm install webpack-dev-server -D

En el archivo de config dev a帽adimos la siguiente propiedad:

devServer: {
  static: path.join(__dirname, 'dist'),
  compress: true,
  historyApiFallback: true,
  port: 8080,
  open: true,
}

y a帽adimos el siguiente script al package.json para poder correr el server desde la terminal "start": "webpack serve --config webpack.config.dev.js",

Considerar que la versi贸n actual de webpack es la 5 (2021):
https://webpack.js.org/configuration/dev-server/

Y me parece que esta clase esta con la versi贸n 4:
https://v4.webpack.js.org/configuration/dev-server/

esta fue la forma en que me funciono a mi

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

Una forma m谩s f谩cil de utilizar webpack-dev-server es hacer la instalaci贸n habitual:

npm i -D webpack-dev-server

Y directamente agregar la configuraci贸n de webpack-dev-server en el script de la siguiente manera:

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

#NuncaParesDeAprender 馃挌馃

Tuve un primer error: webpack dev server ha cambiado la sintaxis en algunas cosas, por ejemplo en vez de 鈥 contentBase: 鈥 se escribe 鈥 static: --.
y el segundo error que me dio fue un 鈥 unexpected token = at new script鈥l cual buscando en stack overflow se soluciona simplemente actualizando la version de node a una estable con el comando 鈥 sudo npm install -g n --, quizas no sea muy claro pero espero que a alguien le sirva, saludos.

Configuraci贸n en webpack.config.dev.js

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

Webpack Dev Server se encarga de montar un servidor para un entorno de desarrollo que se actualiza autom谩ticamente cuando guardemos cambios en el proyecto.

Para instalarlo usamos el comando npm i webpack-dev-server -D.

Una vez instalado hay que a帽adir la propiedad devServer (que tiene como valor un objeto de configuraci贸n) en el archivo de configuraci贸n para desarrollo de Webpack.

La configuraci贸n es la siguiente:

contentBase: path.join(__dirname, 'dist');
compress: true,
port: 3006,
open: true

Ahora hay que a帽adir el comando para ejecutar Webpack Dev Server con NPM:

"start": "webpack serve --config webpack.config.dev.js"
**Solucionando errores** Primero me salia este error ![](https://static.platzi.com/media/user_upload/image-b5967af2-9616-430d-a6f9-835d02c4e3c2.jpg) Lo solucione quitando de webpack.config.dev.js la linea: `watch: true,` Despues tuve este otro error: ![](https://static.platzi.com/media/user_upload/image-e5d71c8b-4b72-4069-94ac-b0c656ef7a5e.jpg) Este lo solucione colocando en webpack.config.dev ```js devServer:{ //colocando static en lugar de baseContent static: path.join(__dirname, 'dist'), ... } ```

Me gusto mucho esta clase

Principios de marzo del 2023, usen el puerto 3006 para que no les de ning煤n problema, el puerto 8080 no me funcionaba. Si por alguna raz贸n no les esta cargando la pagina revisen en la consola que no tengan un 鈥淔etch Error鈥, si este es su caso, revisen el archivo .env para saber si la url de la API sigue ahi.

Lo logr茅

Tengan en cuenta que esta clase en orden debe estar antes de la clase 18. Deploy a NetliFy. Sin embargo, no afecta la publicaci贸n del proyecto.

ya resolv铆 el problema compa帽eros, la versi贸n cambio y con ello solo se especifica de diferente manera el directorio es la 煤nica diferencia, queda de la siguiente manera:

devServer: {
static:{
directory: path.join(__dirname, 鈥榙ist鈥),
},
compress: true,
historyApiFallback: true,
port: 3006,
open: true,
}

Despu茅s de leer la documentaci贸n oficial, y haciendo estos cambios, el puerto s铆 me escuch贸:

devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    historyApiFallback: true,
    port: 3006
  }

Para lo que no les funciona solo cambien contentbase por esto:

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    //...
  },
};

Estuve probando y con los cambios que sugieren todos, utilizando la ultima version de webpack dev server al correrlo no se muestran las imagenes, pero haciendo este cambio adicional se corrige

devServer: {
    // contentBase: "dist", //path.join(__dirname, "dist"),
    static: [
      {
        directory: path.join(__dirname, "dist"),
      },
      {
        directory: path.join(__dirname, "src/assets"),
        publicPath: "/src/assets",
      },
    ],
    compress: true,

[September 2021] La configuraci贸n devServer.contentBase fue eliminada por ende da error, por lo cual es necesario eliminarla, adem谩s de a帽adir la configuraci贸n devServer.open en valor true.

19.-Webpack Dev Server

.
Cuando trabajamos con webpack y queremos ver los cambios en tiempo real vamos a usar webpack dev server:

  • Lo instalamos:
	npm install webpack-dev-server -D 
  • En visual agregamos la configuraci贸n necesaria, en config.dev:
devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    historyApiFallback: true, //Historia de lo que sucede en el navegador
    port: 3006,
  },
  • Agregamos la configuraci贸n a package.json:
"scripts": {
    "start": "webpack serve --config webpack.config.js"
  },
//Asi ya tenemos el modo entorno local
  • Ejecutamos el comando en la terminal.
  • Webpack serve tambi茅n ejecuta un modo watch o de escucha.
  • Nos dar谩 la url.

Instalamos nuestra dependencia

npm i webpack-dev-server

Agregamos nuestras propiedades en nuestro archivo de webpack de desarrollo

// webpack.config.dev.js
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    port: 3005,
    open: true,
  },

ya que webpack-dev-serve trae un watch, ya no es necesario tener la propiedad watch dentro de nuestro webpack.config.dev.js

una vez hecho esto vamos a nuestro package.json agregar el siguiente scripts

"start": "webpack serve --config webpack.config.dev.js"