Webpack与客户端/服务器节点设置？

我正在尝试为具有节点后端服务器的Angular2应用程序设置基于webpack的stream程。 经过几个小时的抨击，我已经设法让客户快乐地build设，但我不知道如何现在整合我的服务器版本。 我的服务器使用生成器，所以必须针对ES6，它需要指向一个不同的types文件（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会工作，但没有运气那里。 我也无法find一个方法来获取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编写我的服务器端代码（现在在Node中有大部分可用的ES2015），而我的Angular 2应用程序在Typescript中编写，所以这个问题没有出现。 但是，你可以得到这个与Webpack一起工作。

首先，您应该有两个独立的Webpackconfiguration：一个用于客户端代码，一个用于服务器端。 用一个configuration就可以做到这一点，但即使是这样，也可能比它的价值更麻烦。 确保在服务器端configuration中设置target: 'node' （ target: 'web'为客户端自动设置）。 并确保你为你的服务器端文件设置了一个entry点（我没有看到上面的那个，但是你最终还是会在单独的configuration文件中）。

其次，你需要有多个tsconfig文件。 默认情况下， ts-loader会在根目录下查找tsconfig.json 。 但是， 可以通过在选项对象或查询string/对象中设置configFileName: 'path/to/tsconfig' 来指定另一个文件 。

这可能会导致另一个问题。 您的IDE也将在您的根目录中查找您的tsconfig.json文件。 如果你有两个单独的文件，你将需要一些方法来告诉你的IDE哪一个用于任何给定的文件。 解决scheme将取决于您的IDE。 就我个人而言，我使用Atom与atom-typescript ，这是太棒了，但它看起来像多个tsconfig文件的东西仍在工作 。 谢天谢地，我从来不用担心这个问题。

至于html-webpack-plugin问题，你不必担心，因为你不会在你的服务器端configuration中包含插件。 但是，仅供参考，您可以传递excludeChunks: ['someChunkName']来忽略某些块包含在脚本标记中。