没有 React 或 React Dom 的 Webpack 捆绑 JS

Question

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

我的想法是，我可以在网页上使用 RequireJS 分别加载 React 或 React Dom，因为我正在将组件添加到 Magento2，Magento2 使用这种方法添加 JS 依赖项。我的想法是，如果我以这种方式添加另一个组件，我不想将 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 文件中包含完整的反应库。有什么建议我该怎么做？

Answer 1

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

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