Reactjs Webpack2，如何从构建中排除react和react dom

我的目标是使用webpack为ES6中制作的react组件库创建一个模块

我正在使用：

• 网页：“2.1.0-beta.25”
• 反应：“15.4.1”

我需要将

react

和

react dom

指定为peerDependencies，这样开发人员就不会下载它

这是我的

包的相关部分。json

：

"peerDependencies": {
  "react": "15.4.1"
},
"dependencies": {
  "chalk": "1.1.3",
  "compression": "1.6.2",
  "cross-env": "3.1.3",
  "immutable": "3.8.1",
  "invariant": "2.2.1",
  "lodash": "4.16.4",
  "minimist": "1.2.0",
  "sanitize.css": "4.1.0",
  "warning": "3.0.0",
  "react-onclickoutside": "5.8.3",
  "styled-components": "1.1.2",
  "classnames": "2.2.5"
},
"devDependencies": {
  "react": "15.4.1",
  "react-dom": "15.4.1",

根据和,

我尝试了以下配置：

一,

二,。 外部：{ 反应：“反应”， “react dom”：“react dom”， }

三,

四,

五,

我总是有这样的错误：

 Dynamic page loading failed Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://bf.me/react-refs-must-have-owner).(…)

所以我想知道，文件中对此不是很清楚

2017年12月，最多2018年1月，我如何排除捆绑的

React

和

ReactDOM

在您的示例中没有看到这一点。正如OP所提到的，下面的JSON配置对他们不起作用

---

从中，尝试以下操作：

{
    externals: {
        // Use external version of React
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

---

如果这不起作用，试着通读整个问题页面。有几个建议可能最终对您有用。

一种方法可以将它们放入单独的文件中，如

reactjs

via

  entry: {
      app:'./src/app.jsx',
      reactjs:[
          'react','react-dom'               ,
      ]
  }

  output: {
    path       : path.join(__dirname, 'public'),
    filename   : 'bundle.[name].js',
    publicPath : '/public/'
  },

 plugins : [
     new webpack.optimize.CommonsChunkPlugin({
        name: 'reactjs',
     })
 ]

所以现在

webpack

将构建两个文件

bundle.app.js

和

bundle.reactjs.js

。

---

将它们包括在你的

index.html

中，首先反应然后应用程序。

这里是我的网页配置，因为我正在处理一个较小的项目，所以它只是基础

const {resolve} = require('path');

module.exports = {
  entry: './demo/react/main.jsx',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'demo/react/dist')
  }
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]

      }
    ]
  },
  externals: {
    // Use external version of React
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

---

啊，我在你列举的例子中没有看到。我的错。祝你好运是的，这对我来说很有用：），我只需要通过CDNI交付，我正在尝试您的解决方案，但我很惊讶如果没有更干净的方法，这将生成无用的文件，我将不得不在.npmignore和.gitignore中排除这些文件。不确定它是否有效我将测试并告诉您在任何情况下都不应该将生成的构建文件包含到gitWell中，我现在有以下错误：webpackJsonpbootstrap_styled未定义。“现在webpack将构建两个文件bundle.app.js和bundle.reactjs.js。首先将它们包含在index.html中，然后是react应用程序。”另外，这是一个应用程序，这是一个npm包，这就是为什么我根本不想做出任何反应。你应该检查一下，我已经将模块设置为umd，umd工作正常，我的模块工作完美，唯一的问题是它抱怨react的第二个实例，显然是与模块捆绑在一起的实例。一旦我尝试了你的技术，大小就从900ko减少到（650kb+250kb（bundle.react.js））。另一方面，我没有导入react捆绑包。有什么想法吗？可能是

 Dynamic page loading failed Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://bf.me/react-refs-must-have-owner).(…)

{
    externals: {
        // Use external version of React
        "react": "React",
        "react-dom": "ReactDOM"
    }
}

  entry: {
      app:'./src/app.jsx',
      reactjs:[
          'react','react-dom'               ,
      ]
  }

  output: {
    path       : path.join(__dirname, 'public'),
    filename   : 'bundle.[name].js',
    publicPath : '/public/'
  },

 plugins : [
     new webpack.optimize.CommonsChunkPlugin({
        name: 'reactjs',
     })
 ]

const {resolve} = require('path');

module.exports = {
  entry: './demo/react/main.jsx',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'demo/react/dist')
  }
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]

      }
    ]
  },
  externals: {
    // Use external version of React
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};