帶有客戶端/服務器節點設置的Webpack？

Question

我正在嘗試爲具有節點後端服務器的Angular2應用程序設置基於webpack的流。幾個小時後，我的頭撞到它，我設法讓客戶快樂地建設，但我無法弄清楚現在如何集成我的服務器版本。我的服務器使用生成器，因此必須針對ES6，並且它需要指向不同的類型文件（main.d.ts而不是browser.d.ts）。

我的源代碼樹看起來像;

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

我想也許只是一個tsconfig.json在客戶端和服務器文件夾將工作，但沒有運氣那裏。我也無法找到一種方法來獲取html-webpack-plugin來忽略我的服務器包，而不是將它注入到index.html中。我目前的tsconfig和webpack在下面，但是有誰成功讓webpack捆綁這樣的設置？任何指針將不勝感激。

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

和我的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

就個人而言，我傾向於寫純JS我的服務器端代碼（大部分在節點現已ES2015）和我的角2的應用程序在打字稿，所以這個問題不上來。但是，您可以將其與Webpack配合使用。

首先，您應該有兩個獨立的Webpack配置：一個用於客戶端代碼，一個用於服務器端。用一個配置完成它可能是可能的，但即使是這樣，它可能比它的價值更麻煩。確保在您的服務器端配置中設置target: 'node'（客戶端自動設置爲target: 'web'）。並確保你爲服務器端文件設置entry點（我沒有看到上面的文件，但是最終你會在單獨的配置文件中找到它）。

其次，你需要有多個tsconfig文件。默認情況下，ts-loader將在您的根目錄中查找tsconfig.json。但是，you can tell specify another file通過在選項對象或查詢字符串/對象中設置configFileName: 'path/to/tsconfig'。

但是，這可能會導致另一個問題。您的IDE還會在您的根目錄中查找您的tsconfig.json文件。如果你有兩個單獨的文件，你需要一些方法告訴你的IDE哪一個用於任何給定的文件。解決方案取決於您的IDE。就我個人而言，我使用原子與atom-typescript，這是太棒了，但它看起來像多個tsconfig文件的東西是still being worked on。謝天謝地，我從來不用擔心這個問題。

至於html-webpack-plugin問題，您不必擔心它，因爲您不會將插件包含在服務器端配置中。但是，僅供參考，您可以將excludeChunks: ['someChunkName']傳遞給omit certain chunks以包含在腳本標記中。