**Instalamos **webpack para el bundle de la app, y babel para que el código sirva en cualquier navegador

npm install @babel/core @babel/preset-env @babel/preset-react 
npm install webpack webpack-cli webpack-dev-server 
npm install babel-loader html-loader html-webpack-plugin

Es buena práctica al momento de trabajar con npm, añadir el flag "-D*"* como dependencia de desarrollo

babel core ⇒ núcleo de babel

babel/preset-env ⇒ para que javascript y las nuevas funcionalidades funcionen en cualquier navegador

babel/preset-react ⇒ para que react funcione en cualquier navegador

webpack y webpack-cli ⇒ bundler del proyecto

webpack-dev-server ⇒ inicializar un servidor en local para mostrar en modo producción o desarrollo nuestra aplicación

loaders y plugin ⇒ sirven para optimizar o extraer html de los archivos (i.e React)

Archivos de configuración

node_modules
// .gitignore

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
//.babelrc

const path = require('path'); //path del proyecto principal
const HtmlWebpackPlugin = require('html-webpack-plugin'); //traemos el plugin
//de html

module.exports = {
    entry: './src/index.js', // punto de entrada
    output: { // lugar al que saldrán todos los archivos
        path: path.resolve(__dirname, 'dist'), //en nuestro path, crea la carpeta dist
        filename: 'bundle.js' // nombre del archivo js resultante
    },
    resolve: { // extensión de archivos a tomar en cuenta
        extensions: ['.js', '.jsx']
    },
    module: { // loaders para cada tipo de archivo
        rules: [ // reglas para usar
            {
                test: /\\.(js|jsx)$/, // extensiones en las cuales actuará babel
                exclude: /node_modules/, // siempre excluir node modules 
                use: { // indicamos el loader
                    loader: 'babel-loader' // babel 
                }
            },
            {
                test: /\\.html$/, // extensiones html
                use: [
                    {
                        loader: 'html-loader' // loader para usar
                    }
                ]
            }
        ]
    },
    plugins: [ // plugins 
        new HtmlWebpackPlugin({ // instanciamos el plugin para html 
            template: './public/index.html', // archivo raíz a transformar
            filename: './index.html' // el archivo resultante
        })
    ]
}
// webpack.config.js

es buena práctica usar los nombres dist o bundle, pues en la industria se usan como estándar