尝试使用 webpack ignorePlugin 从最终包中删除“react-hot-loader”答案

【问题标题】：Trying to remove 'react-hot-loader' from final bundle using webpack ignorePlugin尝试使用 webpack ignorePlugin 从最终包中删除“react-hot-loader”
【发布时间】：2020-03-02 03:46:01
【问题描述】：

react-hot-loader DOC 是这么说的：

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

注意：您可以安全地将 react-hot-loader 安装为常规依赖项而不是 dev 依赖项，因为它自动确保它不会在生产中执行并且占用空间最小。

尽管它这么说。我的目标是：

我想从我的生产包中删除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 /(function(process) {/ 和谐导入 / var react_hot_loader_root__WEBPACK_IMPORTED_MODULE_0__ = webpack_require(/!react-hot -loader/root */ "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 文件，其中包含这一行：

*** !(function webpackMissingModule() { var e = new Error("找不到模块 'react-hot-loader/root'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()) ;

注意：上面一行中的第一个 '***' 字符实际上并不存在。我必须将它们添加到！引号中要显示的感叹号。不知道为什么，但您不能以感叹号开头。

问题

IgnorePlugin 不应该完全忽略react-hot-loader 包吗？为什么它被标记为丢失？看到它甚至没有在代码中使用（因为我已经注释掉了 hot() 调用）。

【问题讨论】：

标签： javascript reactjs webpack react-hot-loader

【解决方案1】：

忽略插件仅在包生成中排除该特定模块。但是，它不会从您的源代码中删除对该模块的引用。因此，您的 webpack 输出会抛出该错误。

绕过此错误的一种方法是使用DefinePlugin 为react-hot-loader 创建一个虚拟存根。更多关于 here.

也就是说，如果NODE_ENV 是production，react-hot-loader 本身会代理孩子而没有任何更改。检查here 和here。因此，在生产模式下，除了直接返回您的组件的 hot() 函数调用之外，没有其他事情发生。

【讨论】：

【解决方案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 在构建时创建包，它知道模式是开发模式还是生产模式（更多关于build modes）并且应该能够使用tree shaking 和UglifyjsWebpackPlugin 消除死代码。
确保如果您使用的是 Babel，它不会将您的代码转换为 CommonJS - 请参阅结论部分，摇树页面的第 2 点。

【讨论】：