Intentando eliminar 'react-hot-loader' del paquete final usando webpack ignorePlugin

2022-07-11 23:44:38

Esto es lo que dicen los react-hot-loader DOC:

https://www.npmjs.com/package/react-hot-loader

Nota: puede instalar de forma segura react-hot-loader como una dependencia normal en lugar de una dependencia de desarrollo, ya que garantiza automáticamente que no se ejecute en producción y que la huella sea mínima.

Aunque dice eso. Mis objetivos son:

Quiero eliminar react-hot-loader de mi paquete de producción.
Y también quiero un único archivo App.js. Eso debería funcionar para DEV y PROD.

El único comando que tengo relacionado con react-hot-loader está dentro de mi archivo App.js:

Aplicación.js

import { hot } from 'react-hot-loader/root';
import React from 'react';
import Layout from './Layout/Layout';

function App() {
  console.log('Rendering App...');
  return(
    <Layout/>
  );
}

export default process.env = hot(App);

Si lo ejecuto así, termino con la siguiente línea en mi archivo app.js transpilado y empaquetado:

/* INYECCIÓN WEBPACK VAR /(función(proceso) {/ importación de armonía / var react_hot_loader_root__WEBPACK_IMPORTED_MODULE_0__ = webpack_require(/! react-hot -cargador/raíz */ "wSuE");

Eso es de esperar.

Pero si cambio mi archivo App.js a:

AppV2.js

import { hot } from 'react-hot-loader/root';  // KEEPING THE IMPORT
import React from 'react';
import Layout from './Layout/Layout';

function App() {
  console.log('Rendering App...');
  console.log(window);
  return(
    <Layout/>
  );
}

// export default hot(App); <--- COMMENTED OUT THE hot() LINE
export default App;

Y añado esta línea a mi webpack.config.js

paquete web.config.js

plugins:[
  new webpack.IgnorePlugin(/react-hot-loader/)
]

Terminaré con un nuevo archivo transpilado app.js con esta línea:

*** !(function webpackMissingModule() { var e = new Error("No se puede encontrar el módulo 'react-hot-loader/root'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()) ;

Nota: Los primeros caracteres '***' en la línea de arriba no existen realmente. ¡Tuve que agregarlos en orden al ! signo de exclamación que se mostrará en la cita. No sé por qué, pero no puedes comenzar una cita con un signo de exclamación.

PREGUNTA

¿No se supone que IgnorePlugin ignora por completo el paquete react-hot-loader? ¿Por qué se marca como perdido? Vea que ni siquiera se usa en el código (ya que comenté la llamada hot()).

- cbdeveloper

javascript reactjs

Source

Responder

Ignorar complemento solo excluye ese módulo en particular en la generación de paquetes. Sin embargo, no eliminará las referencias al módulo de su código fuente. Por lo tanto, la salida de su paquete web arroja ese error.

Una forma de evitar este error es usar DefinePlugin para crear un código auxiliar ficticio para react-hot-loader. Más sobre eso aquí.

Dicho esto, react-hot-loader en sí mismo representa a los niños sin ningún cambio si NODE_ENV es production. Consulte aquí y aquí. Entonces, en el modo de producción, aparte de la llamada a la función hot() que devuelve directamente su componente, no sucede nada más.

Intentando eliminar 'react-hot-loader' del paquete final usando webpack ignorePlugin

Responder

Etiquetas similares

preguntas relacionadas