Webpack bundle JS without React or React Dom

Question

I'd like to use webpack to bundle my JS together for a React component but without including React or React Dom, just my own React code.

The idea is so that I can load React or React Dom separately on the webpage with RequireJS as I'm adding the component to Magento2 which uses this approach for adding JS dependencies. My thought being that if I add another component this way, I don't want to be adding the React Libraries twice.

I think I need to use a different babel loader or pass in some other options?

Here is my 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()
    ]
}

It works but as I said it includes the full react libraries in the generated js/react-component.js file. Any advice how I can do this?

Answer 1

As @Aaqib pointed out I needed to add this config options to webpack.

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