Webpack avec une configuration de noeud client / serveur?

J’essaie de configurer un stream basé sur WebPack pour une application Angular2 avec un serveur principal de nœud. Après de nombreuses heures à me cogner la tête, j’ai réussi à faire en sorte que le client comstack joyeusement, mais je ne vois pas comment intégrer maintenant la construction de mon serveur. Mon serveur utilise des générateurs, il doit donc cibler ES6 et doit pointer vers un fichier de typage différent (main.d.ts au lieu de browser.d.ts).

Mon arbre source ressemble à;

/ -- client/ -- --  (*.ts) -- server/ -- --  (*.ts) -- webpack.config.js -- typings/ -- -- browser.d.ts -- -- main.d.ts 

Je pensais que peut-être qu’un tsconfig.json dans les dossiers client et serveur fonctionnerait, mais sans succès. Je ne parviens pas non plus à obtenir un plugin html-webpack pour ignorer mon ensemble de serveurs et ne pas l’injecter dans index.html. Mes tsconfig et mon Webpack actuels sont indiqués ci-dessous, mais est-ce que quelqu’un a réussi à faire en sorte que Webpack intègre une configuration comme celle-ci? Tous les indicateurs seraient très appréciés.

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

et mon 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 ssortingng 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') ] }; 

Personnellement, j’ai tendance à écrire mon code côté serveur en JS simple (avec la plupart des ES2015 disponibles maintenant dans Node) et mon application Angular 2 en caractères typographiques. Ce problème ne se pose donc pas. Cependant, vous pouvez obtenir que cela fonctionne avec Webpack.

Tout d’abord, vous devez avoir deux configurations Webpack distinctes: une pour votre code côté client et une pour le côté serveur. Il serait peut-être possible de le faire avec une configuration, mais même si c’était le cas, cela poserait probablement plus de problèmes que cela n’en vaut la peine. Assurez-vous de définir target: 'node' dans votre configuration côté serveur ( target: 'web' est défini automatiquement pour le côté client). Et assurez-vous de définir un point d’ entry pour vos fichiers côté serveur (je ne vois pas le point ci-dessus, mais vous aurez finalement cela dans une configuration séparée de toute façon).

Deuxièmement, vous devez avoir plusieurs fichiers tsconfig. Par défaut, ts-loader cherchera tsconfig.json dans votre répertoire racine. Cependant, vous pouvez spécifier de spécifier un autre fichier en définissant configFileName: 'path/to/tsconfig' dans l’object options ou dans la chaîne de requête / object.

Cela peut toutefois conduire à un autre problème. Votre IDE recherchera également votre fichier tsconfig.json dans votre répertoire racine. Si vous avez deux fichiers séparés, vous aurez besoin d’un moyen de dire à votre IDE lequel utiliser pour un fichier donné. La solution à cela dépendra de votre IDE. Personnellement, j’utilise Atom avec atom-typescript , ce qui est fantastique, mais on dirait que les fichiers tsconfig multiples sont encore en train d’être travaillés . Heureusement, je n’ai jamais eu à m’inquiéter de ce problème.

En ce qui concerne le html-webpack-plugin , vous n’aurez pas à vous en inquiéter puisque vous n’incluez pas le plugin dans votre configuration côté serveur. Cependant, juste pour référence, vous pouvez passer excludeChunks: ['someChunkName'] pour excludeChunks: ['someChunkName'] certains morceaux ne soient inclus dans les balises de script.