Webpack con un'impostazione del nodo client/server?

Question

Sto provando a configurare un flusso basato sul webpack per un'app Angular2 con un server di backend del nodo. Dopo molte ore sbattendo la testa contro di esso, sono riuscito a convincere il cliente a costruire felicemente, ma non riesco a capire come integrare ora la mia build del server. Il mio server utilizza i generatori, quindi deve avere come target ES6 e deve puntare a un file di tipizzazione diverso (main.d.ts anziché browser.d.ts).

L'albero di origine è simile;

Ho pensato che forse un tsconfig.json nelle cartelle client e server avrebbe funzionato, ma senza fortuna. Inoltre non riesco a trovare un modo per ottenere il plugin html-webpack per ignorare il mio bundle server e non inserirlo in index.html. Il mio attuale tsconfig e webpack sono sotto, ma qualcuno è riuscito a far sì che il webpack riunisse un setup come questo? Ogni consiglio sarebbe molto apprezzato.

{ 
    "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" 
    ] 
} 

e il mio 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

Personalmente, tendo a scrivere il mio codice lato server JS pianura (con la maggior parte di ES2015 ora disponibile in Node) e la mia angolare 2 applicazione a macchina, quindi questo problema non compare. Tuttavia, puoi farlo funzionare con Webpack.

In primo luogo, è necessario disporre di due configurazioni di Webpack separate: una per il codice lato client e una per il lato server. Potrebbe essere possibile farlo con una configurazione, ma anche se lo fosse, sarebbe probabilmente più un problema che non ne vale la pena. Assicurati di impostare target: 'node' nella configurazione lato server (target: 'web' viene impostato automaticamente per il lato client). E assicurati di impostare un punto entry per i file sul lato server (non ne vedo uno sopra, ma alla fine lo avrai comunque in una configurazione separata).

In secondo luogo, è necessario disporre di più file di tsconfig. Per impostazione predefinita, ts-loader cercherà tsconfig.json nella directory principale. Tuttavia, you can tell specify another file impostando configFileName: 'path/to/tsconfig' nell'oggetto opzioni o stringa/oggetto di query.

Ciò potrebbe tuttavia comportare un altro problema. Il tuo IDE cercherà anche il tuo file tsconfig.json nella tua directory principale. Se hai due file separati, avrai bisogno di un modo per dire al tuo IDE quale usare per ogni dato file. La soluzione a questo dipenderà dal tuo IDE. Personalmente, io uso Atom con atom-typescript, il che è fantastico, ma sembra che la cosa con più file tsconfig sia still being worked on. Per fortuna non ho mai dovuto preoccuparmi di questo problema.

Per quanto riguarda il problema html-webpack-plugin, non ci si deve preoccupare poiché non si include il plug-in nella configurazione lato server. Tuttavia, solo per riferimento, è possibile passare excludeChunks: ['someChunkName'] a omit certain chunks da includere nei tag di script.