- Ventajas
Carga el contenido de nuestra applicacion una sola vez al navegador
la navegacion es dentro de la misma pagina
Facil de debuggear
Facil de crear

- Desventajas
No tan compatible con el seo porque solo tiene una sola cabecera
No puede ser un proyecto escalable

- Crea la carpeta del proyecto
- Inicia el repositorio local
	$ git init
- Inicializa npm 
	$ npm init
- Crea las carpetas y archivos principales para tu priyecto
	-> public -> index.html
	-> src    -> pages
						-> routes
						-> styles
						-> utils
						-> templates
						-> index.js
	-> package.json

- babel y webpack ayudan a que nuestro codigo 
	pueda ser interpretado en cualquier navegador

- Agrega los plugins que se utilizaran
		+ @babel/[email protected] //lector de js moderno
		+ [email protected] //interprete de js moderno
		+ [email protected] //ver en vivo los cambios
		+ [email protected] //transformar nuestro html
		+ [email protected] //usar webpack en tiempo real
		+ [email protected] //para correr webpack
		+ --save-dev //para guardar en el local
		
$ npm install @babel/core babel-loader html-webpack-plugin webpack webpack-cli webpack-dev-server --save-dev

- Crea un archivo webpack.config.js
const path = require('path'); //para declarar la ruta raiz
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {
  entry: path.resolve(__dirname, './src/index.js '), //archivo de entrada
  output: {
    path: path.resolve(__dirname, 'dist'), //path de salida
    filename: main.js //archivo creado
  },
  resolve: {
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\\.js?$/, //todos los archivos .js
        exclude: /node_modules/, //excepto los de esta carpeta
	      use: { //seran interpretados por este loader
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [  //apoyos
    new HtmlWebpackPlugin(
      {
        inject: true, //declaramos que vamos a inyectar un valor
        template: './public/index.html', //base del archivo
        filename: './index.html', //nombre del archivo final por crear
      }
    )
  ]
}

//se agregan los scripts para correr webpack
"scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --open --mode development"
  },

//debera existir un archivo public/index.html para que funcione 
//con su html:5 correspondiente