如何將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',
  }
};