Webpack z konfiguracją węzła klient/serwer?

Question

Próbuję skonfigurować przepływ oparty na pakiecie Webpack dla aplikacji Angular2 z serwerem zaplecza węzła. Po wielu godzinach walenia głową w nie, udało mi się przekonać klienta, żeby zbudował się szczęśliwie, ale nie wiem, jak teraz zintegrować moją kompilację serwera. Mój serwer używa generatorów, więc musi być kierowany na ES6 i musi wskazywać na inny plik typowania (main.d.ts zamiast browser.dts).

Moje drzewo źródłowe wygląda;

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

Pomyślałem, że może tylko tsconfig.json w folderze klienta i serwera będzie działać, ale nie ma szczęścia. Nie mogę też znaleźć sposobu na pobranie html-webpack-plugin, aby zignorować mój pakiet serwera, a nie wstrzyknąć go do pliku index.html. Mój obecny tsconfig i webpack znajdują się poniżej, ale czy komuś udało się zdobyć pakiet sieciowy, aby spakować taką konfigurację? Wszelkie wskazówki będą mile widziane.

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

i mój 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

Osobiście staram się pisać mojego serwera kodu po stronie jako zwykły JS (z większością dostępnych obecnie w ES2015 Node) i moim Kątowymi 2 aplikacji na maszynie, więc ten problem nie wymyślić. Jednak możesz to wykorzystać do współpracy z Webpack.

Po pierwsze, powinieneś mieć dwie osobne konfiguracje Webpack: jedną dla twojego kodu po stronie klienta i jedną dla strony serwera. Możliwe, że można to zrobić za pomocą jednej konfiguracji, ale nawet gdyby tak było, najprawdopodobniej byłby to większy problem niż jest wart. Pamiętaj, aby ustawić target: 'node' w konfiguracji po stronie serwera (target: 'web' jest ustawiany automatycznie po stronie klienta). I upewnij się, że ustawiłeś punkt entry dla plików po stronie serwera (nie widzę jednego powyżej, ale ostatecznie będziesz miał to w osobnej konfiguracji).

Po drugie, musisz mieć wiele plików tsconfig. Domyślnie ts-loader będzie szukać tsconfig.json w twoim katalogu głównym. Jednakże, you can tell specify another file przez ustawienie configFileName: 'path/to/tsconfig' w obiekcie opcji lub ciągu zapytania/obiektu.

Może to jednak prowadzić do innego problemu. Twój IDE będzie również szukał Twojego pliku tsconfig.json w Twoim katalogu głównym. Jeśli masz dwa osobne pliki, będziesz potrzebował jakiegoś sposobu, aby poinformować IDE, którego użyć dla danego pliku. Rozwiązanie tego będzie zależeć od Twojego IDE. Osobiście używam Atom z atom-typescript, co jest fantastyczne, ale wygląda na to, że rzeczą wielu plików tsconfig jest still being worked on. Na szczęście nigdy nie musiałem się martwić o ten problem.

Jeśli chodzi o wydanie html-webpack-plugin, nie musisz się o to martwić, ponieważ wtyczka nie będzie dołączana do konfiguracji po stronie serwera. Jednakże, aby uzyskać odniesienie, można przekazać excludeChunks: ['someChunkName'] do omit certain chunks z uwzględnienia w znacznikach skryptu.