Webpack mit einem Client / Server-Knoten einrichten?
Ich versuche, einen Webpack-basierten Flow für eine Angular2-App mit einem Node-Backend-Server einzurichten. Nach vielen Stunden habe ich es geschafft, den Client glücklich zu machen, aber ich kann nicht herausfinden, wie ich jetzt meinen Server Build integrieren kann. Mein Server verwendet Generatoren, muss also auf ES6 abzielen und auf eine andere Typisierungsdatei verweisen (main.d.ts anstelle von browser.d.ts).
Mein Quelltextbaum sieht aus wie:
/
-- client/
-- -- <all my angular2 bits> (*.ts)
-- server/
-- -- <all my node/express bits> (*.ts)
-- webpack.config.js
-- typings/
-- -- browser.d.ts
-- -- main.d.ts
Ich dachte, vielleicht würde nur eine tsconfig.json in den Client- und Serverordnern funktionieren, aber dort kein Glück. Ich kann auch keinen Weg finden, um das HTML-Webpack-Plugin dazu zu bringen, mein Server-Bundle zu ignorieren und es nicht in die index.html einzufügen. Meine aktuelle tsconfig und mein aktuelles Webpack sind unten aufgeführt. Hat es jemand geschafft, das Webpack dazu zu bringen, ein solches Setup zu bündeln? Alle Hinweise wäre sehr dankbar.
{
"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')
]
};