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设置为webpack conf的入口点：

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

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

1 个答案: