A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Webpack Dev Server

19/28
Recursos

Aportes 30

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

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
  }

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/

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.

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

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

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

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

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贸

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

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"

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

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"