クライアント/サーバーノードをセットアップしたWebpack？

Question

私は、ノードバックエンドサーバーを持つAngular2アプリ用のWebpackベースのフローを設定しようとしています。何時間も頭を悩まして、クライアントを幸せに育てることができましたが、サーバービルドの統合方法を理解できません。私のサーバはジェネレータを使用しているので、ES6をターゲットにする必要があり、別の入力ファイル（browser.d.tsではなくmain.d.ts）を指す必要があります。

ソースツリーは次のようになります。

/ 
-- client/ 
-- -- <all my angular2 bits> (*.ts) 
-- server/ 
-- -- <all my node/express bits> (*.ts) 
-- webpack.config.js 
-- typings/ 
-- -- browser.d.ts 
-- -- main.d.ts 

私は、クライアントとサーバーのフォルダ内だけtsconfig.jsonが働くだろう、おそらく思っていないが、そこには運。また、私のサーババンドルを無視してindex.htmlに挿入しないhtml-webpack-pluginを入手する方法も見つけられません。私の現在のtsconfigとwebpackは以下の通りですが、誰もwebpackを使ってこのような設定をバンドルすることに成功しましたか？どんな指針も大変ありがとうございます。

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "declaration": false, 
     "removeComments": true, 
     "noEmitHelpers": false, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true 
    }, 
    "files": [ 
     "typings/browser.d.ts", 
     "client/app.ts", 
     "client/bootstrap.ts", 
     "client/polyfills.ts" 
    ] 
} 

と私のwebpack.config.js;

var Webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var Path = require('path'); 

module.exports = { 
    entry: { 
    'polyfills': Path.join(__dirname, 'client', 'polyfills.ts'), 
    'client': Path.join(__dirname, 'client', 'bootstrap.ts') 
    }, 
    output: { 
    path:  Path.join(__dirname, 'dist'), 
    filename: '[name].bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.json', '.ts'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loader: 'ts-loader', 
     query: { 
      ignoreDiagnostics: [ 
      2403, // 2403 -> Subsequent variable declarations 
      2300, // 2300 -> Duplicate identifier 
      2374, // 2374 -> Duplicate number index signature 
      2375, // 2375 -> Duplicate string index signature 
      ] 
     } 
     }, 
     { test: /\.json$/, loader: 'raw' }, 
     { test: /\.html$/, loader: 'raw' }, 
     { test: /\.css$/, loader: 'raw!postcss' }, 
     { test: /\.less$/, loSWE: 'raw!postcss!less' } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ template: 'client/index.html', filename: 'index.html' }), 
    new Webpack.optimize.CommonsChunkPlugin('common', 'common.bundle.js') 
    ] 
}; 

Answer 1

は個人的に、私はと活字体で私の角度2アプリ（ノードで利用できるようになりましたES2015のほとんどで）平野JSの私のサーバー側のコードを記述する傾向があるので、この問題が出てくることはありません。しかし、これをWebpackで動作させることができます。

まず、クライアントサイドコード用とサーバー側用の2つのWebpack設定が必要です。 1つの設定でそれを行うことは可能かもしれませんが、たとえそれがあったとしても、それは価値があるよりも面倒です。サーバー側の設定にtarget: 'node'を設定してください（target: 'web'はクライアント側で自動的に設定されています）。そして、サーバー側のファイルにはentryポイントを設定してください（上記のファイルは表示されませんが、最終的には別の設定で使用します）。

第2に、複数のtsconfigファイルが必要です。既定では、ts-loaderはルートディレクトリのtsconfig.jsonを検索します。ただし、you can tell specify another fileは、オプションオブジェクトまたはクエリ文字列/オブジェクトにconfigFileName: 'path/to/tsconfig'を設定します。

しかし、これは別の問題につながる可能性があります。あなたのIDEはあなたのルートディレクトリにあなたのtsconfig.jsonファイルも探します。別々のファイルが2つある場合は、どのファイルにどのファイルを使用するかをIDEに指示する方法が必要です。これに対する解決方法はIDEによって異なります。個人的には、私はatom-typescriptとAtomを使用します。これは素晴らしいですが、複数のtsconfigファイルのように見えます。still being worked onです。ありがたいことに私はこの問題を心配する必要はありませんでした。

html-webpack-pluginの問題については、サーバー側の設定にプラグインを含めないため、気にする必要はありません。ただし、参考のためにexcludeChunks: ['someChunkName']をomit certain chunksに渡すことはスクリプトタグに含まれないようにすることができます。