如何将npm软件包与webpack捆绑在一起并作为对象公开？

Question

我实际上不确定这是否可行，但是我想做的是获取许多NPM软件包，使用Webpack将它们捆绑在一起，并将它们作为对象公开，其中每个软件包都是一个属性。

例如，如果我想将react和react-dom捆绑在一起，它将提供一个类似于以下内容的对象：

{
    'react': /* react code */,
    'react-dom': /* react-dom code */
}

我当前的配置是：

module.exports = {
  entry: [ 'react', 'react-dom' ],
  output: {
    path: __dirname + '/public',
    publicPath: 'http://localhost:8081/public/',
    filename: 'bundle.js',
    libraryTarget: 'umd',
  }
};

这似乎在某种程度上确实起作用，因为它确实返回了一个对象，但是它返回的对象是最后一个entry包所具有的，所以在这种情况下，该对象包含了react-dom的所有方法。

如果我将entry数组的顺序更改为[ 'react-dom', 'react' ] ，则仅会公开react方法。

这个想法是导出对象，这样我就可以使用它们的属性（例如react.Component或react.PureComponent访问这两种包装方法。

我也尝试过使用expose-loader ，但是除非我配置不正确，否则产生的结果与上述相同。

关于如何正确配置webpack来实现此目标的任何想法？

Answer 1

如果我正确理解了您想要做什么，则可以使用以下结构设置一个bundle-source.js ：

exports.react = require('react');
exports['react-dom'] = require('react-dom');
exports.anyModule = require('anyModule');

然后，将bundle-source.js source.js设置为webpack conf的入口点：

module.exports = {
  entry: [ '...path-to...bundle-source.js' ],
  output: {
    path: __dirname + '/public',
    publicPath: 'http://localhost:8081/public/',
    filename: 'bundle.js',
    libraryTarget: 'umd',
  }
};