如何使用webpack打包npm包并将其作为对象暴露出来？

Question

我不确定这是否可能，但我想做的是使用Webpack将多个NPM包捆绑在一起，并将它们公开为一个对象，其中每个包都是一个属性。

例如，如果我想要捆绑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 以实现此目的吗？

- Tom Nolan

Answer 1

如果我理解你想要做的事情正确，你可以设置一个结构为bundle-source.js的文件：

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

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

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

- Sergeon