使用webpack发布React库

Question

I created a library with React as its external dependency. The library is released as UMD:

module.exports = {
    entry: [
        path.join(__dirname, 'src', 'MyLib.js')
    ],
    output: {
        path: path.join(__dirname, 'build'),
        libraryTarget: 'umd',
        library: 'MyLib',
        filename: 'my-lib.js'
    },
    externals: {
        react: true,
        'react-dom': true
    }
};

Now I would like to be able to use the library in the following scenarios:

1. Require the library in the code, assuming React is required as well.
2. Include the library as script in HTML file, assuming React is available as global variable.

The first point is actually the simple one - it should works now as it is. But I don't know how to achieve the second point and not breaking the first one. I tried using ProvidePlugin but with no luck.

Answer 1

Answering my own question: I need to specify external differently. According to webpack documentation:

Note: If using umd you can specify an object as external value with property commonjs, commonjs2, amd and root to set different values for each import kind.

So whole object should look like this:

externals: {
    'react': {
        'commonjs': 'react',
        'commonjs2': 'react',
        'amd': 'react',
        'root': 'React'
    }
}