Webpack Dev Server

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

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.

How To Optimize Your Site With GZIP Compression

• 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 ‘contentBase’. 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…el 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"

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 “Fetch Error”, si este es su caso, revisen el archivo .env para saber si la url de la API sigue ahi.

Lo logré

Vengo del futuro…
Documentación oficial de webpack

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, ‘dist’),
},
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"