Webpack + `create-react-app` | ProvidePlugin无法将React作为模块加载

Question

* 注意：我对Webpack知之甚少。

我想要通过ProvidePlugin在Webpack中加载react节点模块和其他模块，以便全局访问它们。

我创建了一个create-react-app并运行了eject，然后获得了预定义的WebPack配置，create-react-app提供了这些配置。

我读了这篇文章关于如何通过PluginProvidor全局加载react，并在Webpack文档中了解了有关PluginProvidor本身的信息，其中后者指出：

默认情况下，模块解析路径为当前文件夹（./**）和node_modules

基于此，在webpack.config.js中的plugins中，我添加了以下PluginProvidor：

...
plugins: [
  new webpack.ProvidePlugin(
    {
      React: 'react'
    }
  )
]
...

但是它不起作用 - 在JSX文件中调用React（例如 class MyComponent extends React.Component { ... } ），会出现一个错误，指出React未定义（还有一个针对React的错误，指出React必须在JSX文件中定义）。

为什么不起作用？据我所知，我给出了在JSX文件中调用的同一标识符，并且像我之前提到的那样，根据Webpack文档，在node_modules中使用react模块的路径 - 这两者都是必需的才能使其正常工作。

我的配置文件：webpack.config.js

- Gal Grünfeld

---

到目前为止，在尝试使用PluginProvidor之前，我已经做了很多工作。它可以正常工作，并且在我进行import时仍然可以正常工作。但是当我删除import声明并尝试通过PluginProvidor加载它时，它就无法加载。 - Gal Grünfeld

无论如何，你必须导入它。 - Dennis Vash

显示所有Webpack配置，尝试新的Webpack.PluginProvider... - Dennis Vash

我确实没有按照要求（并在文档中说明）使用*webpack*.PluginProvider - 然而，这仍然没有起作用。我已经更新了我的帖子中的代码。 - Gal Grünfeld

谢谢你告诉我链接的问题，我已经修复了。 - Gal Grünfeld

Answer 1

我 不建议 使用ProvidePlugin，甚至更糟的是使用eject命令来退出CRA。

可以使用全局变量替代ProvidePlugin：

// globals.js
import React from 'react';

window.React = React;

然后import './globals'

import './globals';

// no need import React
import ReactDOM from 'react-dom';
...

如果想要给CRA Webpack添加插件，请参考react-app-rewired。

添加插件的示例：

/* config-overrides.js */
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
  if (!config.plugins) {
    config.plugins = [];
  }
  config.plugins.push(new MonacoWebpackPlugin());
  return config;
};

演示：

- Dennis Vash