隆Bienvenida! Este es un curso especial de React Hooks

1

驴Qu茅 aprender谩s en el Curso Profesional de React Hooks?

2

驴Qu茅 son los React Hooks y c贸mo cambian el desarrollo con React?

Introducci贸n a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusi贸n de React Hooks y React Context

6

useReducer: como useState, pero m谩s escalable

7

驴Qu茅 es memoization? Programaci贸n funcional en JavaScript

8

useMemo: evita c谩lculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita c谩lculos innecesarios en funciones

11

Optimizaci贸n de componentes en React con React.memo

12

Custom hooks: abstracci贸n en la l贸gica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: an谩lisis y retos de Platzi Conf Store

15

Instalaci贸n de Webpack y Babel: presets, plugins y loaders

16

Configuraci贸n de Webpack 5 y webpack-dev-server

17

Configuraci贸n de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creaci贸n de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetaci贸n y estilos del home

23

Maquetaci贸n y estilos de la lista de productos

24

Maquetaci贸n y estilos del formulario de checkout

25

Maquetaci贸n y estilos de la informaci贸n del usuario

26

Maquetaci贸n y estilos del flujo de pago

27

Integraci贸n de 铆conos y conexi贸n con React Router

Integraci贸n de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la p谩gina de checkout

31

useRef en la p谩gina de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicaci贸n con la API de PayPal

34

Integraci贸n de pagos con la API de PayPal

35

Completando la integraci贸n de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicaci贸n con la API de Google Maps

37

Integraci贸n de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimizaci贸n de aplicaciones web con React

41

Integraci贸n de React Helmet para mejorar el SEO con meta etiquetas

42

An谩lisis de performance con Google Lighthouse

43

Convierte tu aplicaci贸n de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y cons煤mela con React.js

驴Qu茅 sigue en tu carrera profesional?

45

Pr贸ximos pasos para especializarte en frontend

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Configuraci贸n de Webpack 5 y webpack-dev-server

16/45
Recursos

Aportes 47

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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"
	  }
}
  1. 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

Si se encuentran con este error, webpack-dev-server cambio la key 鈥榗ontentBase鈥 a 鈥榮tatic鈥 en la version 4.0. Unicamente remplazan 鈥榗ontentBase鈥 por 鈥榮tatic鈥

ValidationError: Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'contentBase'. These properties are valid:
   object { bonjour?, client?, compress?, dev?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, injectClient?, injectHot?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, openPage?, overlay?, port?, proxy?, public?, setupExitSignals?, static?, stdin?, transportMode?, useLocalIp? }
    at validate (/home/john/Downloads/repos/project/app/.yarn/cache/schema-utils-npm-3.0.0-e97702da81-a084f593f2.zip/node_modules/schema-utils/dist/validate.js:104:11)
    at new Server (/home/john/Downloads/repos/project/app/.yarn/$$virtual/webpack-dev-server-virtual-678ff6defa/0/cache/webpack-dev-server-https-30a54e980a-affc583bbc.zip/node_modules/webpack-dev-server/lib/Server.js:42:5)
    at /home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/startDevServer.js:34:24
    at Array.forEach (<anonymous>)
    at Object.startDevServer [as default] (/home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/startDevServer.js:25:22)
    at /home/john/Downloads/repos/project/app/.yarn/$$virtual/@webpack-cli-serve-virtual-af6cd77f33/0/cache/@webpack-cli-serve-npm-1.1.0-4f0e34ce07-7684766d7d.zip/node_modules/@webpack-cli/serve/lib/index.js:48:33

Hola, para los que est谩n acostumbrados que con el create-react-app se les abra el servidor de desarrollo autom谩ticamente en el navegador sin tener que navegar a 茅l ustedes, pueden agregarle la bandera open a la configuraci贸n del devServer, de forma que les quede as铆:

devServer: {
		contentBase: path.join(__dirname, "dist"),
		compress: true,
		port: 3005,
		open: true,
	},

Les dejo la configuraci贸n de webpack

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

Si devServer les genera error cambiar estos archivos

webpack.config.js

devServer: {
        static: path.join(__dirname, 'dist'),
        compress: true,
        port: 3005,
        open: true,
    },

package.json

"start": "webpack serve --mode development",
"build": "webpack --mode production"

Buenas! a los que les gusta Typescript le dejo la configuraci贸n:
webpack.config.js

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

module.exports = {
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                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: 3005
    }
}

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react",
        "module": "commonjs",
        "noImplicitAny": true,
        "outDir": "./build/",
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es5"
    },
    "include": [
        "src/index.tsx"
    ]
}```

_.babelrc_


{
鈥減resets鈥: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}```

package.json

{
  "name": "platzi-conf-merch",
  "version": "1.0.0",
  "description": "",
  "main": "index.tsx",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "mini-css-extract-plugin": "^1.3.3",
    "source-map-loader": "^2.0.0",
    "typescript": "^4.1.3",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  }
}

Adivinen quien instal贸 react-router-dom en vez de react-dom.

Hola a todos, resulta que mi webpack demoraba mucho en refrescar el navegador despues de guardar un cambio de javascript asi que esto funcion贸 para mi:

module.exports = {
    mode: 'development',//IMPORTANTE PARA QUE SEA OPTIMO
    entry:'./src/index.js',//Punto de entrada
   ...
}

Configuracion correcta en 2022:

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

/** @type {import('webpack').Configuration} */
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'
                    }
                ]
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            filename:'./index.html'
        })
    ],
    devServer:{
        allowedHosts:path.join(__dirname,'dist'),
        compress:true,
        port:3005
    }
}

Esta p谩gina te crea la configuraci贸n por ti.
https://createapp.dev/

驴PROBLEMAS CON WEBPACK DEV SERVER?


Hola, si tienes problemas con la configuracion de la ultima versi贸n de webpack-dev-server 4.0.0

Para usar Webpack dev server se necesitan ciertas versiones de algunas dependencias.

webpack-dev-server v4.0.0+ requires node >= v12.13.0, webpack >= v4.37.0 (but we recommend using webpack >= v5.0.0), and webpack-cli >= v4.7.0.

Extraido de: webpack-dev-server

Mi soluci贸n fu茅 seguir los pasos de intalaci贸n de la ultima versi贸n de node para WSL: Node


Ya con esto se configura webpack dev server asi:

devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 3006
  },

Y en el package.json el script qued贸:

"start": "webpack serve --mode development",

El atributo contentBase que usamos en el webpack.config.js fue cambiado de nombre, ahora se llama static por si alguien est谩 dandole problemas eso, que cambie el nombre a static y funciona todo bien! 馃槃

16 clases sin errores. creo que me sirvio fallar todas las veces anteriores. Ademas, este curso esta actualizado, hasta esta parte, a fecha de enero 2021. Y se agradece. Voy genial con los temas! gracias Oscar.

鉁–onfiguraci贸n **devServer ** en webpack 5 鉁

  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 3000,
    open: true
  }

Recuerden cambiar contendBase por static y en el package.json especificar los modos:

static: path.join(__dirname, 鈥渄ist鈥),

鈥渟tart鈥: 鈥渨ebpack serve --mode development鈥,
鈥渂uild鈥: 鈥渨ebpack --mode production鈥

ContenBase no se usa mas en webpack

Si llegaras a tener algun error con webpack-dev-server, relacionado con el path es probable que el path seleccionado este configurado de una manera erronea

En el curso hacen uso de contentBase para seleccionar el path, pero en versiones mas recientes fue cambiado por static

Configuracion mas optima de devServer

devServer: {
        static: {
            publicPath: path.join(__dirname, "dist")
        },
        port: 3000,
        compress: true,
        open: true 
    }

++contentBase ++no se usa ya en la configuraci贸n de devServer. Les dejo esta otra por si les da error al ejecutar el servidor:

    devServer: {
        compress: true,
        historyApiFallback: true,
        port: 3000,
        open: true,
    },

Les facilito las documentaci贸n de webpack para que puedan ir entendiendo un poco m谩s acerca de los puntos tratados en esta clase.

package.json:
Por si les sucede algo

{
  "name": "platzi-conf-merch",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel": "^6.23.0",
    "babel-loader": "^8.2.2",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.1",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Aquellos que tengan problemas con contentBase, desde la actualizaci贸n webpack-dev-server 4 ( creo que desde la versi贸n 4) se hace de la siguiente manera:

devServer: {
	static: {
	directory: path.join(__dirname, "dist")
	}, 
	compress: true
	open: true,
	port: 3005
}

El open es para que se abra automaticamente el servidor de desarrollo en el navegador. De todas maneras les dejo la documentaci贸n https://webpack.js.org/configuration/dev-server/

Ojo con los warnings, una consola llena de warnings no est谩 鈥渢odo bien鈥 como lo indican en esta clase, consola limpia, coraz贸n contento, y ademas senior developer contento xD

Que buen repaso de la configuracion de webpack y babel

Por que es necesario utilizar webpack ? al inicio del curso se creo con npx no se podr铆a seguir desarrollando de esta forma

驴Por qu茅 el primer use es un objeto, pero el segundo use es un arreglo que dentro tiene el objeto, no deber铆an tener la misma estructura?

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: /\.(js|jsx)$/,
        exclude: /node_module/,
        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: 3005,
  },
};

.babelrc //En este importan las comillas dobles

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

package.json

{
  "name": "platzi-conf-merch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "webpack": "^5.8.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.12.7",
    "@babel/preset-react": "^7.12.7",
    "babel-loader": "^8.2.2",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0"
  }
}

en las nuevas versiones de webpack se debe poner el mode y env茅s de contentBase es static as铆:

Si tienen este error:

Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

es porque en la configuracion de devServer deberia de ir de la siguiente manera:

devServer: {
    static: {
      directory: path.join(__dirname, "public")
    },
    compress: true,
    port: 3006,
  },

Si no les funciona con contentBase en el webpack.config.js actualmente pueden utilizar allowedHosts

allowedHosts: path.join(__dirname, 'dist'),

Si les da error de 鈥渃ontentBase鈥 prueben cambiandolo a 鈥渟tatic鈥, en las 煤ltimas versiones hubo esa modificaci贸n.

Si piensas que actualizar Node no deber铆a inluir mucho en el error que te sale al intentar usar static en vez de contentBase鈥 pues creeme que s铆 influye, as铆que actualiza tu Node

Utilicen esto:

/** @type {import('webpack').Configuration} */

Pongalo encima de module.exports

Me paso algo raro con la versi贸n del webpack listadas abajo, donde el 鈥渃ontentBase鈥 no lo reconocia, lo tuve que cambiar por 鈥渟tatic鈥, ya quie le铆 que se cambio en las ultimas versiones del modulo.

鈥渨ebpack鈥: 鈥淾5.57.1鈥,
鈥渨ebpack-cli鈥: 鈥淾4.8.0鈥,
鈥渨ebpack-dev-server鈥: 鈥淾4.3.1鈥,

devServer: {
static: path.join(__dirname, 鈥榙ist鈥),
compress: true,
port: 3005,
}

Si tienen alg煤n error como este:

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

Simplemente tiene que ir al archivo webpack.config.js y cambiar contentBase por static ya que por lo que entiendo webpack renombro eso static

Espero haber podido ayudar a alguien

Si se encuentran con un error cambien a la version 4.5.0 en webpack-cli ^^ 5/10/2021
{
鈥渘ame鈥: 鈥減latzi-conf-merch鈥,
鈥渧ersion鈥: 鈥1.0.0鈥,
鈥渄escription鈥: 鈥溾,
鈥渕ain鈥: 鈥渋ndex.js鈥,
鈥渟cripts鈥: {
鈥渢est鈥: 鈥渆cho 鈥淓rror: no test specified鈥 && exit 1鈥,
鈥渟tart鈥: 鈥渨ebpack serve鈥,
鈥渂uild鈥: 鈥渨ebpack --mode production鈥
},
鈥渒eywords鈥: [],
鈥渁uthor鈥: 鈥溾,
鈥渓icense鈥: 鈥淚SC鈥,
鈥渄ependencies鈥: {
鈥渞eact鈥: 鈥淾17.0.2鈥,
鈥渞eact-dom鈥: 鈥淾17.0.2鈥
},
鈥渄evDependencies鈥: {
鈥渨ebpack鈥: 鈥5.1.3鈥,
鈥渨ebpack-cli鈥: 鈥4.5.0鈥,
鈥渨ebpack-dev-server鈥: 鈥3.11.0鈥,
"@babel/core": 鈥7.12.3鈥,
"@babel/preset-env": 鈥7.12.1鈥,
"@babel/preset-react": 鈥7.12.1鈥,
鈥渂abel-loader鈥: 鈥8.1.0鈥,
鈥渉tml-loader鈥: 鈥1.3.2鈥,
鈥渉tml-webpack-plugin鈥: 鈥4.5.0鈥
}
}

Holaaa 馃槃

Si el archivo .babelrc lo hace asi no abra nececidad de importar reac:

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

NOOO

// import React from 'reacr'

Configuraci贸n de Webpack 5 y webpack-dev-server

Creamos en la ra铆z de nuestro proyecto 2 archivos. webpack.config.js:

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: 3005,
  }
};

y .babelrc:

{
  "presets": [
    "@babel/preset-env", //* compila ES y ES6
    "@babel/preset-react" //* compila ES6 y sintax铆s de React
  ]
}

En el archivo package.json a帽adimos 2 scripts:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack serve",
  "build": "webpack --mode production"
},

S茅 que el curso no es de expresiones regulares, pero les recomiendo much铆simo una extensi贸n de VS code. Se llama 鈥淩egex explained鈥 y les ayudar谩 much铆simo.

me marea esta configuraci贸n

Me sale este error de acceso denegado pero no se a que se refiere

> [email protected]1.0.0 start
> webpack serve

鈩 锝ds锝: Project is running at http://localhost:3005/
鈩 锝ds锝: webpack output is served from /
鈩 锝ds锝: Content not from webpack is served from /mnt/c/Users/Pc/OneDrive/Proyectos/platzi-conf-merch/dist
(node:7729) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
鈿 锝dm锝: asset bundle.js 273 KiB [emitted] [minimized] [big] (name: main) 1 related asset
asset ./index.html 229 bytes [emitted]
runtime modules 430 bytes 3 modules
orphan modules 147 bytes [orphan] 1 module
cacheable modules 560 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 21.2 KiB 10 modules
  modules by path ./node_modules/html-entities/lib/*.js 58.9 KiB 5 modules
  modules by path ./node_modules/url/ 37.8 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.52 KiB 3 modules
  modules by path ./node_modules/react/ 8.5 KiB 2 modules
  modules by path ./node_modules/react-dom/ 175 KiB 2 modules
  modules by path ./node_modules/webpack/hot/*.js 1.45 KiB 2 modules
  modules by path ./node_modules/scheduler/ 6.84 KiB
    ./node_modules/scheduler/index.js 197 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 6.65 KiB [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (273 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (273 KiB)
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.13.0 compiled with 4 warnings in 30256 ms
鈩 锝dm锝: Compiled with warnings.
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/hiberfil.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'

Hola. 驴Alguien sabe por qu茅 sale este error cuando ejecuto npm run build?

Si a alguno le pase lo mismo que a mi, que el webpack tira error y no hallan en los comentarios alguna solucion para continuar con este curso. Aqui les dejo la solucion a la que llegue ivnestigando por internet.

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

const rulesForStyles = {
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
};

const rulesForJavascript = {
    //loader para transformar react a codigo que entienda navegador
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
        presets: [ 
            [
                //se configura babel para traducir y runtime autoamtic sirve para no tener que improtar react
                // en cada componente, ya que es mala practica
                '@babel/preset-react',
                {
                    runtime: 'automatic'
                }
            ]
        ]
    }
}

const rules = [ rulesForJavascript, rulesForStyles ]

module.exports = ( env, argv ) => {
    const { mode } = argv;
    const isProduction = mode === 'production';

    return {
        // Ruta de punto de entrada
        //entry: 'src/index.js'
        // ruta donde se generara la app
        output: {
            filename: isProduction ? '[name].[contenthash].js' : 'main.js',
            path: path.resolve( __dirname, 'dist')
        },
        resolve: {
            extensions: [ '.js', '.jsx' ]
        },
        module: {
            rules:  rules 
        },
        plugins: [
            //Tener una forma de crear el index.html, ya que es mala practica tenerlo en la carpeta de build
            new HtmlWebpackPlugin( {
                template:  './public/index.html',
            })
        ],
        devServer: {
            open: true, // Abrir el navegador
            port: 8080,
            compress: true,
            client: {
                overlay: true, // abrir overlay con los errores
            },
            historyApiFallback: true,
        },
        devtool: 'source-map'
    }
};

Para el uso de React 17 que configuraci贸n debo tener en webpak y babel para que no me de error al no declarar el import de React?

Si se supone que en las 煤ltimas versiones de Rect ya no es necesario importar React (es decir, colocar el cda archivo import React from 鈥榬eact鈥) cuando sigo todos estos pasos no me ejecuta el npm run start hasta que escriba los import de React? alguien sabe por qu茅?

Precisi贸n de cirujano para no equivocarse. Imagino que us谩ndolo con frecuencia ser谩 m谩s intuitivo. Va a venir bien hacer el nuevo curso de webpack.

test: /.(js|jsx)$/ = b煤scame .\ (cualquier nombre)(js|jsx)$ que termine con js o jsx

Me funcion贸 con el puerto 8080

n