Angular2 + Webpackでモジュールごとに別々のファイルを作成するにはどうすればいいですか？

Question

私はhttps://angular.io/docs/ts/latest/guide/webpack.htmlの手順に従い、それを稼働させることができました。

しかし、私が望むのはモジュールごとに別々のファイルを持つことです。

モジュールごとにwebpack.common.jsに新しいエントリポイントを追加しようとしましたが、アプリケーションをビルドするときにエラーが返されます。

module.exports = { 
    entry: { 
     'polyfills': './src/polyfills.ts', 
     'vendor': './src/vendor.ts', 
     'app': './src/main.ts', 
     'test': './src/app/test/test.module.ts' 
    } 
    ..... 
} 

これを達成する方法はありますか？

Answer 1

を参照してください詳細については、出力

のノートを取ります。 yourrouteルートが要求されたときに、何かここでのように、

{ 
    path: 'yourroute', loadChildren:() => require.ensure('./yourmodule', (comp: any) => { 
     return comp.default; 
    }), 
    .... 
    ... 
} 

は、yourmoduleはon-demandをロードされます。

Answer 2

複数のエントリポイントを使用するには、オブジェクトをエントリオプションに渡すことができます。各値はエントリポイントとして扱われ、キーはエントリポイントの名前を表します。

複数のエントリポイントを使用する場合は、デフォルトのoutput.filenameオプションを上書きする必要があります。それ以外の場合、各エントリポイントは同じ出力ファイルに書き込みます。エントリポイントの名前を取得するには[name]を使用します。

例えば

entry: { 
    polyfills: './src/polyfills.ts', 
    vendor: './src/vendor.ts', 
    app: './src/main.ts', 
    test: './src/app/test/test.module.ts' 
} 
output: { 
    path: path.join(__dirname, "dist"), 
    filename: "[name].entry.js" 
} 

は左側に引用符なしであることを試してみてください。また、あなたがルート設定で利用可能なangular2のloadChildren方法でのWebPACKのcode-splittingを使用することができますWebpack multiple entry points