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();