2016-04-12 9 views
1

私は、クライアントサイドWebアプリケーションを管理するためにtypescriptとbabelでwebpackを使用しています。Webpackの複数のエントリーポイントを呼び出す

第三者のスクリプト用にvendor.jsファイル、main.jsファイル、ページごとに特定の機能を提供するために必要に応じてロードできるページごとのスクリプトが必要です。

すべてのスクリプトは期待通りにコンパイルされていますが、実際にはvendor.jsファイルだけが呼び出されています。他はコンパイルされますが、呼び出されることはありません。

以下は私のwebpack.config.jsファイルです。

'use strict'; 

let webpack = require('webpack'); 

module.exports = { 
    entry: { 
    main: './assets/js/main.ts', 
    "single-page": './assets/js/src/new-loan.ts', 
    vendor: [ 
     "svg4everybody" 
    ] 
    }, 
    output: { 
    filename: './public/assets/js/[name].js' 
    }, 
    resolve: { 
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     minChunks: Infinity 
    }) 
    ], 
    module: { 
    loaders: [{ 
     test: /\.ts(x?)$/, 
     loader: 'babel-loader!ts-loader', 
     exclude: /node_modules/ 
    }] 
    } 
} 

また、ページ固有のファイルの1つの例です。理想的には、ロードされると、このファイルはページ上でalert通知をトリガーします。

webpackJsonp([1],[ 
/* 0 */ 
/***/ function(module, exports) { 

    'use strict'; 

    alert('test'); 

/***/ } 
]); 

私はなぜ/警告が(モジュール関数が呼び出されることはありません)トリガされていない/見ることができますが、私はそれをしたいのですがどのように動作するのWebPACKを設定する方法を見つけ出すことはできません。

ありがとうございました。

+0

他のすべてのエントリをインポートする方法はありますか? –

+0

すべてのページにすべてをロードしたくありません。 – jdp

答えて

1

私はCommonsChunkPluginがあなたの設定のvendorバンドルを上書きしていることがわかりました。 CommonsChunkPluginの名前をcommonからvendorに変更し、他のすべてのバンドルの前にすべてのファイルにcommonバンドルを含めてみてください。 CommonsChunkPluginを使用する場合は、共通バンドルにのみコアWebpackモジュールローダーヘルパー関数が含まれているため、すべてのページに埋め込まなければなりません。

new webpack.optimize.CommonsChunkPlugin({ 
    name: "common", 
    minChunks: Infinity 
})