如何连接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、.\src\client\polyfills.ts、.\src\client\vendor.ts和.\src\server\main.ts）中以/// <reference path="../../typings/index.d.ts" />开头。

因此有以下问题：

1. webpack也能处理服务器端的文件，但是与客户端的不同吗？例如转译- 是，复制到dist目录- 是，打包- 否？请注意我正在使用webpack-dev-server。
2. 是否可以继承tsconfig.json配置，以便我可以避免在三个文件中重复许多选项？
3. 当文件布局类似于我的布局时，是否可以避免在顶级TypeScript文件中包含/// <reference path="../../typings/index.d.ts" />？

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

- mark

Answer 1

1. 我认为你不需要/不想要webpack处理服务器端文件。通过Typescript编译器（通过outDir配置）已经处理了服务器端文件的转换和复制到/dist目录下。由于在webpack配置中没有指定服务器文件作为入口点，因此不会对服务器端文件进行打包。
2. 目前还不可能。然而，看起来有一个问题可以跟踪：https://github.com/Microsoft/TypeScript/issues/9876
3. 不确定，与#3有关（但并不是真的）。我想只要你想保持客户端和服务器端文件真正分离，就不会出现这种情况。

- gnalck