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

Question

*注意：我几乎不了解Webpack。

我想通过react在Webpack中加载ProvidePlugin节点模块和其他模块，以对其进行全局访问。

我创建了create-react-app，然后运行eject，并访问了create-react-app提供的Webpack的预定义配置。

我阅读了this post的有关通过react全局加载PluginProvidor的信息，并在Webpack docs中阅读了PluginProvidor本身，其中后者指出：

  

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

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

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

但是它不起作用-当我调用React时，在JSX文件中（例如class MyComponent extends React.Component { ... }），我收到一条错误消息，指出未定义React（还有React特定的错误，必须将React定义为在JSX文件中定义。）

为什么不起作用？据我了解，我给了我在JSX文件中调用的相同标识符，并且正如Webpack文档所述，我已经提到了react中node_modules模块的路径-两者使其正常工作。

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

Answer 1

使用ProvidePlugin是not a good idea，even worse是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 Web Pack的信息，请参见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;
};

演示：