Webpack不在庫命名空間中創建子模塊

Question

我正在嘗試構建一個Webpack配置，允許我在特定命名空間中創建多個模塊。我有以下配置：

module.exports = { 
    entry: { 
     'one': './src/modules/one/one.module.js', 
     'two': './src/modules/two/two.module.js', 
     'three': './src/modules/three/three.module.js', 
    }, 
    output: { 
     filename: '[name].module.js', 
     path: path.resolve(__dirname, 'dist'), 
     library: ['myModules', '[name]'], 
     libraryTarget: 'umd', 
    }, 
    ... 
}; 

的問題是，它創建一個全局命名空間：myModules，但子模塊是不可見的。我無法通過運行new window.myModules.one();來創建新實例。我該如何解決這個問題？

Answer 1

假設您正在使用ES模塊並且每個模塊都有默認導出，則必須訪問default屬性。

new window.myModules.one.default(); 

的WebPack 3中添加的output.libraryExport選項，它允許你指定一個特定出口到庫的目標。您可以僅使用默認導出，而不是使用導出對象。爲此，您需要將output.libraryExport設置爲'default'。

output: { 
    filename: '[name].module.js', 
    path: path.resolve(__dirname, 'dist'), 
    library: ['myModules', '[name]'], 
    libraryTarget: 'umd', 
    libraryExport: 'default', 
}, 

有了這個，你可以使用它，因爲你已經想要。

new window.myModules.one();