如何连接Angular2 + Webpack + Node + Express？

Question

首先，我有线和工作，但我对结果有些不满，并且有一种感觉可以改进。

（目前的结果可在此处找到 - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1。）

目录结构是：

C:.
│   .gitignore
│   package.json
│   tsconfig.json
│   tslint.json
│   typings.json
│   webpack.config.js
│
├───dist
│   └───server
│           api.js
│           api.js.map
│           main.js
│           main.js.map
│
└───src
    ├───client
    │       app.component.ts
    │       index.html
    │       main.ts
    │       polyfills.ts
    │       tsconfig.json
    │       vendor.ts
    │
    └───server
            api.ts
            main.ts
            tsconfig.json

现在dist文件夹只包含从./src/server编译的服务器端文件。它们由IntelliJ IDEA放置在那里，因为./src/server/tsconfig.json在保存时请求编译。

客户端捆绑发生在内存礼貌的webpack-dev-server中。 ./src/client/tsconfig.json 不会在保存时请求编译。

我不喜欢当前设置的内容 - https://github.com/MarkKharitonov/Angular2WebpackNodeExpress/tree/v0.0.1#problems，即：

1. webpack将负责处理 ./ src / client 下的任何普通.js文件 - 它们将被捆绑并自动置于 ./ dist / client 下。但是./src/server下的普通.js文件怎么样？我是否需要一个任务运行器（gulp，grunt，等等......）或webpack中是否有解决方案？
2. 我有三个tsconfig.json文件 - ./ src / client / tsconfig.json ， ./ src / server / tsconfig.json 和 ./ tsconfig.json 即可。这三个文件共享大多数选项，但不是全部。现在我将它们复制到三个文件中的每个文件中 - 不是很好。
3. 此外，由于 typings 文件夹位于根目录，我必须启动所有顶级TypeScript文件（。\ src \ client \ main.ts ，< strong>。\ src \ client \ polyfills.ts ，。\ src \ client \ vendor.ts 和。\ src \ server \ main.ts ）与/// <reference path="../../typings/index.d.ts" />。

因此问题：

1. webpack还可以处理服务器端文件，但与客户端文件不同？即transile - 是的，复制到dist - 是的，捆绑 - 不是吗？请记住，我正在使用webpack-dev-server。
2. 是否可以继承tsconfig.json配置，这样我就可以避免在我拥有的三个文件中复制很多选项？
3. 当文件布局与我的类似时，是否可以避免在顶级TypeScript文件中包含/// <reference path="../../typings/index.d.ts" />？

我知道这些是三个问题而不是一个问题，但我觉得它们都是密切相关的，一个问题的答案也可能是另一个问题的答案。

Answer 1

1. 我认为您不需要/希望webpack处理服务器端文件。将服务器端文件映射和复制到/ dist由Typescript编译器（通过outDir配置）处理。由于没有将服务器文件指示为webpack配置中的入口点，因此不会捆绑服务器端文件。
2. 目前无法使用。但是，看起来有一个问题需要跟踪：https://github.com/Microsoft/TypeScript/issues/9876
3. 不确定，在某种程度上与＃3相关（但不是真的）。只要您想保持客户端和服务器文件真正独立，我就不会想象。