Webpack mit einem Client/Server-Knoten Setup?

Question

Ich versuche, einen Webpack-basierten Fluss für eine Angular2-App mit einem Knoten-Backend-Server einzurichten. Nach vielen Stunden, die mir den Kopf dagegen schlagen, habe ich es geschafft, den Kunden glücklich zu machen, aber ich kann nicht herausfinden, wie ich meinen Server Build jetzt integrieren soll. Mein Server verwendet Generatoren, muss also auf ES6 zielen und muss auf eine andere Typisierungsdatei zeigen (main.d.ts anstelle von browser.d.ts).

Mein Quellbaum sieht so aus;

Ich dachte vielleicht nur eine tsconfig.json in den Client- und Server-Ordnern würde funktionieren, aber kein Glück dort. Ich kann auch keinen Weg finden, das HTML-Webpack-Plugin dazu zu bringen, mein Serverpaket zu ignorieren und es nicht in index.html zu injizieren. Mein aktuelles tsconfig und Webpack sind unten, aber ist es irgendjemandem gelungen, Webpack ein solches Setup zu bündeln? Alle Hinweise würden sehr geschätzt werden.

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

und meine 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

Persönlich neige ich meinen Server-Seite Code im Klar JS schreiben (mit dem meisten ES2015 jetzt auch in der Node) und mein Eckige 2 App in Maschinenschrift, so dass dieses Problem kommt nicht auf. Sie können dies jedoch mit Webpack arbeiten lassen.

Zuerst sollten Sie zwei separate Webpack-Konfigurationen haben: eine für Ihren clientseitigen Code und eine für die Serverseite. Es könnte möglich sein, es mit einer einzigen Konfiguration zu machen, aber selbst wenn es so wäre, wäre es wahrscheinlich mehr Mühe als es wert ist. Stellen Sie sicher, dass Sie target: 'node' in Ihrer serverseitigen Konfiguration festlegen (target: 'web' wird automatisch für die Clientseite festgelegt). Und stellen Sie sicher, dass Sie einen entry Punkt für Ihre serverseitigen Dateien festlegen (ich sehe oben keinen, aber Sie werden dies letztendlich in einer separaten Konfiguration haben).

Zweitens müssen Sie mehrere tsconfig-Dateien haben. Standardmäßig sucht ts-loader in Ihrem Stammverzeichnis nach tsconfig.json. you can tell specify another file jedoch durch Festlegen von configFileName: 'path/to/tsconfig' im Optionsobjekt oder Abfragezeichenfolge/Objekt.

Dies kann jedoch zu einem anderen Problem führen. Ihre IDE wird auch nach Ihrer tsconfig.json Datei in Ihrem Stammverzeichnis suchen. Wenn Sie zwei separate Dateien haben, benötigen Sie eine Möglichkeit, Ihrer IDE zu sagen, welche für eine bestimmte Datei zu verwenden ist. Die Lösung hierfür hängt von Ihrer IDE ab. Persönlich verwende ich Atom mit atom-typescript, was fantastisch ist, aber es sieht so aus, als wäre die multiple tsconfig-Datei die Sache still being worked on. Zum Glück musste ich mich nie um dieses Problem kümmern.

Wie für das html-webpack-plugin Problem müssen Sie sich nicht darum kümmern, da Sie das Plugin nicht in Ihre serverseitige Konfiguration einschließen. Als Referenz können Sie jedoch excludeChunks: ['someChunkName'] an omit certain chunks übergeben, da Sie in den Skript-Tags enthalten sind.