Curso Práctico de React.js
Curso Práctico de React.js

Introducción

1

¿Qué es React.js?

2

Conceptos fundamentales de React

Configurando el entorno de desarrollo

3

Instalación de React y React DOM

4

Configuración de Webpack y Babel

5

Cambios en tiempo real con Webpack

6

React con CSS y Sass

Maquetación en React

7

Transformando HTML y CSS en componentes de React

8

Estilos en los componentes de React

Páginas, rutas y componentes

9

React Router DOM

10

Navegación entre rutas

11

Header en todas las rutas

12

¿Qué es Atomic Design?

13

Solución al reto: componentes y rutas de React Shop

14

Tipos de componentes en React: stateful vs. stateless

15

Imágenes y alias en Webpack

React Hooks

16

React.useState

17

Toggle del menú

18

useEffect y consumo de APIs

19

Custom Hooks para la tienda

20

useRef y formularios

21

React Context

22

Completando el carrito de compras

23

Orden de compra

24

Calculando el precio total

25

Eliminando productos del carrito

Deploy

26

Cómo comprar tu dominio y conexión con Cloudflare

27

Automatizando el despliegue con GitHub Actions

Próximos pasos

28

Retos de React.js (bug hunters)

29

Continúa con el Curso Práctico de Next.js

Curso Práctico de React.js

Curso Práctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Configuración de Webpack y Babel

4/29
Recursos

Aportes 29

Preguntas 24

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Adrián Díaz

Adrián Díaz

hace 8 meses

Comandos NPM

Babel:

 npm install @babel/core @babel/preset-env @babel/preset-react

Webpack:

npm install webpack webpack-cli webpack-dev-server

HTML plugin:

 npm install babel-loader html-loader html-webpack-plugin
Nazareno Aznar Altamiranda

Nazareno Aznar Altamiranda

hace 7 meses

Yo se que esto parece complicado al principio, pero no te estreses, vale la pena!

Estoy terminando el curso y todos los días antes de empezar a programar monton un entorno de react desde cero, al principio no me acordaba y tenia que ver las clases o el codigo anterior, pero con el tiempo me fui adaptando y en menos de una semana entiendo perfectamente como montarlo y se que es lo que hace cada instruccion.

Investigá que es cada cosa, tomá el curso de webpack y leete su documentacion (no es tan complicado che!) de a poquito para que vayas asimilando todo. ¿No entendés para que es ese plugin? Buscalo! no lo entendes todavía? Seguis buscando otro día! Así de a poco te vas a ir completando

En el camino le encontré el sentido a armarlo desde cero en vez de usar create-react-app, y es su increible personalizacion/optimizacion, pero solo te vas a dar cuenta del todo si lo experimentas y lo vas personalizando.

Carlos Mario

Carlos Mario

hace 8 meses

Paquetes requeridos, instalacion con npm

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

Configuración del archivo webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // ... Configuración de empaquetado
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    resolve: {
        extensions:['.js','.jsx']
    },
    module: {
        // ... Lista de reglas respecto a los loaders	
        rules : [
            // Reglas para babel
            {
                test: /\.(js | jsx)$/,
                use: { loader: 'babel-loader'},
                exclude: /node_modules/
            },
            // Reglas para HTML loader
            {
		test: /\.html$/,
		use: [{ loader: 'html-loader'}]
           }

        ]

    },
    plugins: [
	    //... Configuración de plugins
        new HtmlWebpackPlugin(
		{ 
      		template: './public/index.html', 
		filename: './index.html'   
		}
	)
	]
}
Braulio_Rivas

Braulio_Rivas

hace 7 meses

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 a 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
        })
    ]
}
Soraimar Claivel Bernal Camacho

Soraimar Claivel Bernal Camacho

hace 7 meses

Hola [email protected] como recomendación para generar el .gitignore les recomiendo esta herramienta que me gusta mucho

Gilberto Santamaria

Gilberto Santamaria

hace 7 meses

A veces me toca poner más lenta la clase por la velocidad con la que habla Oscar XD

Adrian Gonzalez

Adrian Gonzalez

hace 8 meses

¿No hubiera sido conveniente instalar webpack y babel como dependencias de desarrollo?

Paolo Joaquin Pinto Perez

Paolo Joaquin Pinto Perez

hace 6 meses

SHORTCUT PARA WEBPACK EN VSCODE

¡Hola!, les dejo con shortcut o snippet para escribir la configuracion de webpacl mas rapido. Lo que deben realizar es:

  1. control + shift + p
  2. escriben snippets en el recuadro que les aparece
  3. seleccionan preferences: configure user snippets
  4. buscan javascript
  5. les aparece un json y copian lo siguiente
{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"webpack config": {
		"prefix": "wpc",
		"body": [
		  "const path = require(\"path\");",
		  "const HtmlWebpackPlugin = require(\"html-webpack-plugin\");",
		  "",
		  "module.exports = {",
		  "  entry: \"./src/index.js\",",
		  "  output: {",
		  "    path: path.resolve(__dirname, \"dist\"),",
		  "    filename: \"bundle.js\",",
		  "  },",
		  "  resolve: {",
		  "    extensions: [\".js\", \".jsx\"],",
		  "  },",
		  "  module: {",
		  "    rules: [",
		  "      {",
		  "        test: /\\.(js|jsx)$/,",
		  "        exclude: /node_modules/,",
		  "        use: {",
		  "          loader: \"babel-loader\",",
		  "        },",
		  "      },",
		  "      {",
		  "        test: /\\.html$/,",
		  "        use: [",
		  "          {",
		  "            loader: \"html-loader\",",
		  "          },",
		  "        ],",
		  "      },",
		  "    ],",
		  "  },",
		  "  plugins: [",
		  "    new HtmlWebpackPlugin({",
		  "      template: \"./public/index.html\",",
		  "      filename: \"./index.html\",",
		  "    }),",
		  "  ],",
		  "  devServer: {",
		  "    contentBase: path.join(__dirname, \"dist\"),",
		  "    compress: true,",
		  "    port: 3000,",
		  "  },",
		  "};",
		],
		"description": "webpack configuration"
	  }
}
  • Listo ahora cuando quieran crear el archivo de configuracion de webpack solo escriben wpc en el editor de codigo y les sale todo, esto es para ahorrar tiempo en futuros proyectos. Espero les sirva.
wpc //les saldra para completar
José Brandon Palmeros Domínguez

José Brandon Palmeros Domínguez

hace 7 meses

Nota: no olviden agregar --save-dev al final de cada comando cuando instalen las dependencias de webpack y babel, ya que esto hace que se instalen solo para el entorno de desarrollo. Si tienen más dudas no olviden hacer el “Curso de Gestión de Dependencias y Paquetes con NPM”.

Irving Juárez

Irving Juárez

hace 7 meses

create-react-app sucks

Max Andy Diaz Neyra

Max Andy Diaz Neyra

hace 5 meses

Resumen de la clase:

  • Babel:
    npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

  • Webpack
    npm install webpack webpack-cli webpack-dev-server --save-dev

  • plugin y loaders:
    npm install babel-loader html-loader html-webpack-plugin --save-dev

  • babel
    creamos un archivo .labelrc agregamos la configuración para que babel reconozca los presets

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
  • Webpack
    Ahora creamos un archivo webpack.config.js para preparar nuestro proyecto de forma personalizada
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 a 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
        })
    ]
}
Irving Juárez

Irving Juárez

hace 7 meses

Esto se puede ver muy agotador y tardado, pero yo prefiero esto a create-react-app, ya que tenemos un control real de lo que esta pasando en nuestro bundle

Juan Carlos Valencia López

Juan Carlos Valencia López

hace 7 meses

Cómo le hago para que me salga la flecha al indentar?

William Cortés

William Cortés

hace 6 meses

Esta muy bien conocer el paso a paso, siempre había utilizado npx-create-react-app, y no sabía para que era cada archivo.

Basilio Gianfranco De Paula Cuevas

Basilio Gianfranco De Paula Cuevas

hace 3 meses

Ahora entiendo los memes de twitter cuando dicen: ayúdame a configurar webpack😶

Romina Olivera

Romina Olivera

hace 2 meses

La verdad me había entusiasmado con el curso pero he perdido demasiado tiempo buscando errores una decepción.

Hector Munoz

Hector Munoz

hace 4 meses

A mí parece mucha complicación para iniciar un proyecto, y ni siquiera has comenzado con la app en si… debe haber una forma de iniciar esto sin tanto protocolo…porque siento que uno pierde mucho tiempo haciendo esto

Luis Alejandro Vera Hernandez

Luis Alejandro Vera Hernandez

hace 6 meses

Que tremenda clase! Super! 👏

Danis Elias Cañada Blandon

Danis Elias Cañada Blandon

hace 5 días

Estos paquetes @babel/core, @babel/preset-env y @babel/preset-react deberian ser dependencias de desarrollo con el flag -D.

Kenneth Angulo L

Kenneth Angulo L

hace 2 meses

Curso Práctico de React.js

Es un proyecto creado en el curso Práctico de React.js de Platzi. Estas son las notas de la clase e instalacion del proyecto paso a paso.
Al tiempo tambien estoy practicando como generar los readme (archivo mark down), espero les se de utilidad.

Configurar Entorno de Desarrollo

git init
npm init
npm install react react-dom

Configuración de Webpack y Babel

Webpack genera un recopilado (literalmente un manojo) de todos los diferentes tipos de archivo en uno solo. Ejemplo tenemos muchos .js los recopila en un solo archivo .js
Babel es el traductor que hace que nuestro codigo escrito en ECS6 funcione en cualquier navegador

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

(Pluggins y Loaders)
Los Loaders son como paquetes, que le dicen a Webpack como transformar o como manipular diferentes tipos de archivos.

npm install babel-loader html-loader html-webpack-plugin

Configuración de Codigo

touch es un comando en la terminal (para poner en practica lo aprendido, me parecio mas rapido manejarlo asi), para crear los archivos.
los archivos que empiezan con . (punto) son archivos ocultos

  • touch .babelrc
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}
  • webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
	},
	mode: 'development',
	resolve: {
		extensions: ['.js', '.jsx'],
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\.html$/,
				use: [
					{
						loader: 'html-loader'
					}
				]
			},
			{
				test: /\.(css|scss)$/,
				use: [
					"style-loader",
					"css-loader",
					"sass-loader",
				],
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './public/index.html',
			filename: './index.html'
		}),
		new MiniCssExtractPlugin({
			filename: '[name].css'
		}),

	],
	devServer: {
		allowedHosts: path.join(__dirname, 'dist'),
		compress: true,
		port: 3005,
	}
}
Juan David Franco

Juan David Franco

hace 3 meses

¡NO TE ATORES CON PROBLEMAS DE IMPLEMENTACIÓN!

Generalmente la instalación de entornos de desarrollo trae muchos problemas a la hora de implementarlo. A continuación voy a colocar los comandos correctos y la sintaxis de babel y webpack que me ha funcionado en muchas ocasiones

COMANDOS PARA INSTALAR BABEL

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader -D

COMANDOS PARA INSTALAR WEBPACK

npm i webpack webpack-cli webpack-dev-server -D

archivo babel.config.json
si no te funciona .babelrc puedes crear un archivo llamado “babel.config.json” que hace lo mismo

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

archivo webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.[hash].js'
    },
    mode: 'development',
    resolve:{
        extensions: ['.js','.jsx']
    },
    module:{
        rules:[
            { 
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }, 
            {
                test: /\.html$/,
                use: 'html-loader',
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}

es importante que cuando termines de instalar los paquetes de terceros el comando **npm run build ** para cerciorarte que esté corriendo correctamente, si todo fue realizado correctamente debería mostrarse lo siguiente

	node:7512) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by status 1010 KiB [cached] 1 asset
asset index.html 365 bytes [compared for emit]
runtime modules 670 bytes 3 modules
modules by path ./node_modules/ 974 KiB
  modules by path ./node_modules/scheduler/ 26.3 KiB
    modules by path ./node_modules/scheduler/*.js 412 bytes 2 modules
    modules by path ./node_modules/scheduler/cjs/*.js 25.9 KiB 2 modules
  modules by path ./node_modules/react/ 70.6 KiB
    ./node_modules/react/index.js 190 bytes [built] [code generated]
    ./node_modules/react/cjs/react.development.js 70.5 KiB [built] [code generated]
  modules by path ./node_modules/react-dom/ 875 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.development.js 874 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/ 327 bytes
  ./src/index.js 195 bytes [built] [code generated]
  ./src/components/App.jsx 132 bytes [built] [code generated]
webpack 5.69.1 compiled successfully in 8328 ms

con todo eto puedes continuar con la implementación de tu aplicación web en react

Andrés Medina

Andrés Medina

hace 3 meses

Este blog me ayudo a entender mucho cada una de las cosas que webpack.

https://medium.com/@yabikusensei/configurar-babel-webpack-loaders-plugins-y-linter-javascript-d1ed1b5e5a88

Karen Paola Torres Archbold

Karen Paola Torres Archbold

hace 2 meses

Configuracion en el terminal:

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

.babelrc

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

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output:{
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve:{
        extensions: ['.js', '.jsx'],
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_module/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.html?$/,
                use: {
                    loader: 'html-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ]
}
Rodrigo Ramos Xochiteotzin

Rodrigo Ramos Xochiteotzin

hace 4 meses

config babel

Así te evitas escribir imr en cada proyecto para usar React

{
	"presets": [
			"@babel/preset-env",
            //evitas importar react en los header files de tus componentes
			["@babel/preset-react", {
				"runtime": "automatic"
			}]
	]
}
fidel agustin fuentes

fidel agustin fuentes

hace 24 días

webpack config gente


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    resolve: {
        extensions:['.js', '.jsx'],
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)?$/,
                exclude: /node_modules/,
                use:{
                    loader:'babel-loader',
                }
            },
            {
                test: /\.html$/,
                use:[
                    {
                        loader: 'html-loader'
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            filename:'./index.html',

        }),

    ]
}
Victor Hugo Cruz Carballo

Victor Hugo Cruz Carballo

hace 2 meses
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    entry:'./src/index.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },
    resolve:{
        extensions: ['.js', '.jsx'],
    },
    module:{
        rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\.html$/,
				use: [
					{
						loader: 'html-loader'
					}
				]
			}
		]
    },
    plugins: [
		new HtmlWebpackPlugin({
			template: './public/index.html',
			filename: './index.html'
		}),
	]
    
}
Manuel Antonio Miranda Naveda

Manuel Antonio Miranda Naveda

hace 3 meses

asi va el documento .babelrc

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

asi va el documento webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
   entry:'.src/index.js',
   output:{
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
},
resolve: {
        extensions: ['.js, '.jsx''],      
},
module: {
   rule: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
 loader: ''babel-loader
}
},
{
  test: /\.html$/,
  use: [
  {
    loader: 'html-loader',
  }
]
}
]
},
plugins: [
 new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html'
}),
]
}

no tiene buena indentacion por que lo escribi en el block de notas con el objetivo de practicar la semantica

Blas Rodriguez934

Blas Rodriguez934

hace 4 meses

Vamos a empezar instalando Babel y webpack para hacer la personalizacion de nuestro proyecto. A direferencia de lo que encontramos en el mercado es que podemos hacer nuestra propia personalizacion, vamos a entender todas nuestras particularidades nuestro proyecto y de esta forma controlarlo hacia el futuro
comenzamos con el sigueinte comando:

npm install @babel/core @babel/preset-env @babel/preset-react

para webpack

npm install webpack webpack-cli webpack-dev-server

html plugin para el proyecto

npm install babel-loader html-loader html-webpack-plugin

Luego creamos el archivo en la raiz de nuestro proyecto “.babelrc”:es un archivo de configuracion necesario para nuestro proyecto en este caso vamos a configurar los preset para que babel los pueda reconocer.

codigo de .babelrc

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

Luego creamos nuestro archivo wepack.config.js para la configuracion de webpack

codigo webpack.config.js

const path =require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');

module.exports={
    entry:'./src/index.js',
    ouput:{
        path:path.resolve(__dirname,'dist'),
        __filename:'bundle.js'
    },
    resolve:{
        extensions:['.js','.jsx'],
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.html$/,
                use:[{
                    loader:'html-loader',
                }]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            filename:'./index.html'
        })
    ]
}
Andyno Cortez

Andyno Cortez

hace 4 meses