Ideas/conceptos claves

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.

Recursos

How To Optimize Your Site With GZIP Compression

Apuntes

• 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 las 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 estás usando HTML5 History API la página index.html será 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"
	}
}