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.

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

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.

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'   
		}
	)
	]
}

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
        })
    ]
}

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

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

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

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

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”.

create-react-app sucks

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
        })
    ]
}

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

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

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.

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

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

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

Que tremenda clase! Super! 👏

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

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,
	}
}

¡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

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

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'
        })
    ]
}

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"
			}]
	]
}

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',

        }),

    ]
}
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'
		}),
	]
    
}

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

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'
        })
    ]
}