A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Curso de Webpack

Curso de Webpack

Oscar Barajas Tavares

Oscar Barajas Tavares

Configuraci贸n de plugins y loaders para React

24/28
Recursos

Aportes 34

Preguntas 35

Ordenar por:

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

Trucazo
Si agregas esta configuraci贸n a .babelrc:

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

Ya no necesitas importar React en los archivos donde utilizas sintaxis jsx:

App.jsx

const App = () => <h1>Hola mundo desde REACT!</h1>

export default App

no me corr铆a webpack server entonces revise la documentaci贸n y en lugar de poner

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3006
  }
}

Puse

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

Y todo listo

Tal vez no ayude mucho pero estuve como 10 minutos averiguando el error

ReactDOM.render( App , document.getElementById('app'))

Y solo habia que ponerle las llaves al componente 馃槄

ReactDOM.render( <App/> , document.getElementById('app'))

馃帓 Comandos de instalaci贸n de la clase

# NPM
npm install -D html-loader html-webpack-plugin
# YARN
yarn add -D html-loader html-webpack-plugin

AVISO IMPORTANTE:

鈥搒i llegaste hasta aqui y la configuracion te arroja error, debes escribir lo siguiente en el script start:

"start": "webpack-dev-server"

鈥搚a que 鈥渨ebpack serve鈥 ya no cumple la funcion como lo hacia antes

Si aparece este error, solo tienen que asignar un modo de compilacion (development o production) ya sea en el archivo de configuraci贸n de webpack o en el script en el package.json
.

Instalaci贸n de dependencias:

npm i -D html-loader html-webpack-plugin

Configuraci贸n 鈥渨ebpack.config.js鈥

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

module.exports = {
	module: {
		rules: [
			{
				test: /\.html$/,
				use: {
					loader: 'html-loader'
				}
			}
		]
	},
	plugins: [
        new HtmlWebpackPlugin({
            template: './src/public/index.html',
            filename: 'index.html'
        })
    ]
}

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

en la configuraci贸n del HtmlWebpackPlugin, el archivo de salida por defecto es un index.html, no es necesario poner filename: index.html a menos quieran cambiar el nombre del archivo de salida

Si alguien est谩 utilizando la 煤ltima versi贸n de react y tiene problemas de compatibilidad, ejemplo del mensaje de error que puede aparecer:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

Cuando instalen las dependencias agreguen al final lo siguiente:

... --legacy-peer-deps

Ejemplo:

npm install -D html-loader html-webpack-plugin --legacy-peer-deps

Hola a todos,

por si alguien tiene este error: "Module parse failed: Unexpected token (5:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import App from 鈥./components/App.jsx鈥;
|

ReactDOM.render(<App />, document.getElementById(鈥渁pp鈥));
| "

He cambiado

test: /\.(.js|jsx)$/,

por

test: /\.js$|jsx/,

y ahora funciona bien 馃槂

https://stackoverflow.com/questions/57924348/you-may-need-an-appropriate-loader-to-handle-this-file-type-currently-no-loader

Con esta configuraci贸n de devServe resolv铆 mi error:

devServer: {
    static: {
      directory: path.join(__dirname, "dist/"),
    },
    port: 3006,
  },

Espero les sirva鈥

Diferencia entre un plugin y un loader

Es importante saber la diferencia entre un plugin y un loader, ya que estos no son sin贸nimos. El plugin es c贸digo que es capaz de modificar la compilaci贸n, como en el caso de Babel, el cual transpila el c贸digo, modificando la compilaci贸n.
.
Por otro lado, el loader funciona antes de que se haga la compilaci贸n, por lo que no afecta a esta. Sabiendo eso, el plugin es mucho mas dif铆cil de manejar que el loader (en relacion a darle mantenimiento y esas cosas).

ahora en vez de contentBase se usa static. changelog comment; https://github.com/webpack/webpack-dev-server/issues/2958#issuecomment-757141969

Tuve problemas a la hora de visualizar el 鈥淗ello React鈥 pero con esto pude resolverlo por si a alguien le sirve n.n

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

se soluciona con esto:

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

Ahora necesitamos el loader y el plugin para trabajar con HTML:

npm install  html-loader html-webpack-plugin -D

Primero necesitamos traer los recursos:

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

Ahora tenemos que trabajar con ese loader, asi que agregaremos una nueva regla;

{
   test: /\.html$/,
   use: [
     {loader: 'html-loader'}
       ]
  }

Ahora agregamos nuestro arreglo de plugins donde agregamos el html webpack plugin:

plugins:[
        new HtmlWebpackPlugin({
            template: './public/index.html',
            filename: './index.html'
        })
    ],

Tenemos que probar que todo funciona creando los scripts haciendo el build y el servidor local:

Fabuloso!!!, sera que alguien se sabe toda esa configuraci贸n de memoria?

Para que se abra autom谩ticamente la ventana de nuestro proyecto, como lo hace react.

En nuestro webpack.config.js agregamos la propiedad:

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

en el video anterior de HTML donde el profe explicaba como agregarlo a un proyecto vanilla, me di cuenta que no agrego el loader de html, porque con react si ?

馃憣

Me arroja este warning

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  bundle.js (251 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 (251 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.72.1 compiled with 4 warnings in 8758 ms```

Ayuda con este error please!!

Si alguien est谩 realizando este curso m谩s recientemente, tuve un problema a la hora de visualizar el componente en de 鈥淗ello React鈥.

Revisando la documentaci贸n de React, la forma que me acept贸 para crear el componente es la siguiente:

import React from 'react';

//Sintaxis actual para definir componentes React
const App = <h1>Hello React!</h1>  

export default App;

A mi me genero un error al correr npm start relacionado con fallback, creo que es por no especificar el modo en el que se ejecuta webpack. Lo solucione modificando el script 鈥渟tart鈥 de la siguiente forma

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

Rules - Reglas

rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [{ loader: "html-loader" }],
      },
    ],

Me lleg贸 a dar el siguiente error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'html-loader'

Para solucionarlo, me sirvi贸 volver a instalar html-loader y html-webpack-plugin, que por alg煤n motivo, no estaban en el package.json.

npm install html-loader html-webpack-plugin -D

Guide Loaders and Server

  1. Instalar
npm install html-loader html-webpack-plugin -D 
  1. Importamos el modulo:
const HtmlWebpackPlugin = require('html-webpack-plugin');
  1. Agregamos las configuraci贸n en el objeto module.exports:
module.exports = {
//...
     test: /\.html$/,
                use: [
                    {loader: 'html-loader'}
                ],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './public/index.html',
          filename: './index.html'
        })
		

a alguien le ha pasado que le sale localhost:8080? y de ser asi, como se soluciona eso???

24.-Configuraci贸n de plugins y loaders para React

.
Agregaremos los plugins y loaders faltantes y los configuramos.

  • HTML:

    //Instalaci贸n
    npm install html-loader html-webpack-plugin -D
    
    //Configuraci贸n
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    
    rules: [
          {
            test: /\.html$/,
            use: [
              {
                loader: "html-loader",
              },
            ],
          },
        ],
    
    plugins: [
        new HtmlWebpackPlugin({
          template: "./public.index.html",
          filename: ".index.html",
        }),
      ],
    
  • A帽adimos los scripts en package.json y probamos que funcionen:

    "scripts": {
        "start": "webpack-dev-server",
        "build": "webpack --mode production"
      },	
    

el flag de dependencia al final es mas entendible

npm i html-loader html-webpack-plugin -D

鈥揘ecesito ayuda, me arroja un error cuando realizo la primera compilacion con npm run start.

> [email protected]1.0.0 start /media/dcordova/TOSHIBA EXT/ESTUDIOS/PLATZI/WEBPACK/curso-webpack-react
> webpack-dev-server ./src/index.js/

internal/modules/cjs/loader.js:905
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /media/dcordova/TOSHIBA EXT/ESTUDIOS/PLATZI/WEBPACK/curso-webpack-react/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (/media/dcordova/TOSHIBA EXT/ESTUDIOS/PLATZI/WEBPACK/curso-webpack-react/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/media/dcordova/TOSHIBA EXT/ESTUDIOS/PLATZI/WEBPACK/curso-webpack-react/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 start: `webpack-dev-server ./src/index.js/`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dcordova/.npm/_logs/2021-06-30T04_23_51_993Z-debug.log

TUve probelmas para instalar webpack y las dem谩s dependencias, pero encontre en Stack este comando y me funcin贸

npm uninstall webpack webpack-cli webpack-dev-server

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

configuracion local:
鈥渟tart鈥: 鈥渨ebpack serve鈥

configuracion en produccion:
鈥渂uild鈥: 鈥渨ebpack --mode production鈥