javascript - 尝试使用webpack ignorePlugin从最终捆绑包中删除“react-hot-loader”

这就是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注入/（函数（过程）{/和声导入/ 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（“ Cannot find module'react-hot-loader / root'”）; e.code ='MODULE_NOT_FOUND'; throw e;}（））;

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

题

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

最佳答案

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

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

也就是说，如果react-hot-loader是NODE_ENV，则production本身可以直接代理孩子。选中here和here。因此，在生产模式下，除了hot()函数调用直接返回您的组件外，没有其他事情发生。

关于javascript - 尝试使用webpack ignorePlugin从最终捆绑包中删除“react-hot-loader”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58716932/

HOT

javascript - 尝试使用webpack ignorePlugin从最终捆绑包中删除“react-hot-loader”