Webpack捆绑了没有React或React Dom的JS

Question

我想使用webpack将我的JS捆绑在一起以用于React组件，但不包括React或React Dom，而只是我自己的React代码。

我的想法是，当我将组件添加到使用此方法添加JS依赖关系的Magento2时，我可以使用RequireJS在网页上分别加载React或React Dom。 我的想法是，如果我以这种方式添加另一个组件，我不想两次添加React库。

我想我需要使用其他babel loader或传递其他选项？

这是我的webpack.config

const path = require('path');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'web'),
        filename: 'js/react-component.js',
        publicPath: ''
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}

它可以工作，但是正如我所说，它在生成的js/react-component.js文件中包含完整的React库。 有什么建议我该怎么做？

Answer 1

正如@Aaqib指出的那样，我需要将此配置选项添加到webpack。

externals : {
  react: 'react',
  reactDom: 'react-dom'
}