Попытка удалить «response-hot-loader» из окончательного пакета с помощью веб-пакета ignorePlugin

Question

Это то, что react-hot-loader DOCs говорит:

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

Примечание: вы можете безопасно установить ответную-горячую загрузку как обычную зависимость вместо разработчикаЗависимость, поскольку она автоматически гарантирует, что она не выполняется в производственном процессе, и занимаемая площадь минимальна.

Даже при том, что это говорит это. Мои цели:

• Я хочу удалить react-hot-loader из моего производственного комплекта.
• И я также хочу один App.js файл. Это должно работать для DEV и PROD.

Единственная команда, с которой я связан react-hot-loader, находится внутри моего App.js файла:

App.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);

Если я запускаю его так же, я получаю следующую строку в моем app.js файле и в комплекте:

/ * WEBPACK VAR INJECTION / (функция (процесс) {/ импорт гармонии / varact_hot_loader_root__WEBPACK_IMPORTED_MODULE_0__ = webpack_require (/ ! Реагировать-горячий-загрузчик / корень * / "wSuE");

Это ожидается.

Но если я изменю свой файл App.js на:

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;

И я добавляю эту строку в мой webpack.config.js

webpack.config.js

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

Я закончу с новым транспортом app.js файл с этой строкой:

***! (функция webpackMissingModule () {var e = new Error ("Не удается найти модуль« response-hot-loader / root ""); e.code= 'MODULE_NOT_FOUND'; throw e;} ());

Примечание. первые символы '***' в строке выше не существуют. Я должен был добавить их для того, чтобы! знак исключения должен быть указан в цитате. Не знаю почему, но вы не можете начать цитату с восклицательного знака.

ВОПРОС

Разве IgnorePlugin не должен полностью игнорировать react-hot-loaderпакет? Почему он помечен как отсутствующий? Обратите внимание, что он даже не используется в коде (поскольку я закомментировал вызов hot()).

Answer 1

Ignore Plugin исключает только этот конкретный модуль в генерации комплекта. Однако это не удалит ссылки на модуль из вашего исходного кода. Следовательно, ваш вывод из веб-пакета вызывает эту ошибку.

Один из способов обойти эту ошибку - использовать DefinePlugin для создания фиктивной заглушки для react-hot-loader. Подробнее об этом здесь .

При этом react-hot-loader само проксирует детей без каких-либо изменений, если NODE_ENV равно production. Отметьте здесь и здесь . Таким образом, в производственном режиме, кроме вызова функции hot(), который напрямую возвращает ваш компонент, больше ничего не происходит.

Answer 2

Другим вариантом может быть:

// App.js
export default function AppFactory() {
    if (process.env.NODE_ENV === "development") {
        return hot(App);
    } else {
        return App;
    }
}

// index.js:
import AppFactory from './App';
const App = AppFactory();
// ...
<App />

Теперь, поскольку webpack создает пакеты во время сборки, он знает, является ли режим разработкой или производством (подробнее о режимах сборки ) и долженбыть в состоянии устранить мертвый код с помощью встряхивания дерева и UglifyjsWebpackPlugin .
Убедитесь, что если вы используете Babel, он не переносит ваш код в CommonJS - см. раздел Заключение, пункт 2страницы дрожащего дерева.