用webpack ignorePlugin从最终包中删除“反应热装载机”

Question

react-hot-loader文档就是这样说的：

https://www.npmjs.com/package/react-hot-loader 注意:您可以安全地将react热加载器作为常规依赖项而不是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___ = 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=新错误(“无法找到模块‘root热加载程序/根”)；e.code =’模块_NOT_ find‘；抛出e；}()；

注意:上面一行中的第一个“*”字符实际上并不存在。我不得不把它们加进去！将在报价中显示的显示标记。不知道为什么，但你不能用感叹号开始引用。

问题

难道IgnorePlugin不应该完全忽略react-hot-loader包吗？为什么它被标记为失踪了？确保它甚至不在代码中使用(因为我已经注释掉了hot()调用)。

Answer 1

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

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

这就是说，如果react-hot-loader是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点。

Answer 3

将环境模式传递给babel。

"scripts": {
  "build-dev": "webpack --node-env development",
  "build-prod": "webpack --node-env production",
},