使用 Typescript 的 Webpack：两个配置中的通用设置，那么哪个优先？

Question

我正处于将 javascript（使用 webpack）项目转换为 typescript 项目的初始阶段，我遇到的许多困惑之一是它们似乎是一些可以出现在 webpack 和 typescript 中的配置设置，那么哪个优先？

（我目前正在开发一个节点 cli 应用程序）。

例如，主要示例是编译中包含哪些文件。

在 webpack config 中，您可以使用规则指定选择哪些输入文件：

  module: {
    rules: [
      {
        test: /index.ts/,
        use: 'shebang-loader'
      },
      {
        test: /\.ts(x?)$/,
        use: 'ts-loader'
      },
      {
        test: /\.json$/,
        use: 'json-loader'
      }
    ]
  },

从上面可以看出，我对不同的文件类型使用了各种加载器。

然后我的初始 tsconfig.json 如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": true,
    "lib": [
      "es5", "es2015", "es6", "dom"
    ]
  },
  "include": [
    "lib/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

那么 webpack 和 typescript 交互的真正本质是什么？我无法从打字稿或 webpack 文档中辨别出这一点。两者似乎都能够指定编译中包含的输入文件。

另一个（可能更好的例子）是输出文件。在 webpack 配置中，我有以下内容：

  output: {
    libraryTarget: 'commonjs',
    path: path.join(__dirname, 'dist'),
    filename: 'application-bundle.js'
  }

它定义了“application-bundle.js”是“dist”文件夹内的输出文件。

在 tsconfig 中，您可以有如下内容：

"outFile": "./dist/application-bundle.js",

（我目前没有定义 outFile 属性，但我知道您可以这样做，但是如果能够这样做，就会产生歧义并因此造成混乱）。那么在这种情况下，webpack 会覆盖打字稿还是反之亦然？推荐的策略是什么？

可能有更多的 typescript/webpack 交叉会引起混淆，但我到目前为止所描述的 2 个是我需要了解的最前沿和最紧迫的问题，谢谢。

编辑：考虑过之后，我还需要再澄清一下。我猜当你构建一个 TS/WP 项目时，TS 编译器运行首先创建所有 .js 文件（假设在 .dist 文件夹中）。然后 webpack 捆绑所有生成的 .js 文件。因此，假设这是正确的，那么我是否需要将 webpack 配置为使用 dist 文件夹中的 .js 文件作为其输入，而不是项目源中的 .js 文件（即 ./lib 下的所有内容，这是我的源 js 文件所在的位置）是）？

我希望以增量方式转换我的项目，所以我刚才所说的并不真正符合我的需求。Webpack 需要从 ./dist 中提取一些 .js 文件，从 ./lib 中提取一些尚未转换为 typescript 的文件。我不知道如何修改项目进行增量升级。

Answer 1

[...] 似乎有一些配置设置可以出现在 webpack 和 typescript 中，那么哪个优先？

您说得对，当 Webpack 与 TypeScript 结合时，配置中存在一些自然冗余。让我们来回答你的第一个问题：

编译中包含哪些文件？[...] 另一个例子是输出文件。[...] 那么在这种情况下，webpack 会覆盖打字稿还是反之亦然？推荐的策略是什么？

简单地说，TypeScript 和 Webpack 都处理/转换输入文件并在目标目录结构或文件包中发出输出——两者都需要一些输入/输出配置信息。TypeScript 编译器可以独立运行，也可以作为更大的 Webpack 构建的一部分集成为文件处理器。使用outFile选项 TypeScript 甚至可以将其视为一个迷你捆绑器，因为它将所有文件捆绑.ts到一个目标文件中。

要回答这个问题，如果 TypeScript 或 Webpack 配置优先，那么了解 Webpack 的工作原理很重要。我将在这里引用您的假设之​​一：

我猜当你构建一个 TS/WP 项目时，TS 编译器运行首先创建所有 .js 文件（假设在 .dist 文件夹中）。然后 webpack 捆绑所有生成的 .js 文件。

这并不完全正确。但是你说得很好，因为它更清楚地说明了你的核心理解问题。Webpack 中的所有内容都从您在配置中指定的入口点开始- 如果您愿意，那就是输入。从这个入口模块，webpack 考虑所有其他可传递导入的模块（例如 viaimport或require）并创建一个依赖树。

依赖树中的每个文件都可以选择由Loaders转换，也可以像文件处理管道一样链接。因此ts-loader，底层的 TypeScript 编译器使用test: /\.ts(x?)$/谓词对 .ts/.tsx 文件应用转换。

总而言之，Webpack 会考虑您的入口文件，这会导致大量进一步导入的 .ts/.tsx 文件（在您的其他文件类型中，我们在这里忽略了它们）。对于每个单个文件，都会在加载器处理管道的过程中调用 TypeScript 加载器。因此，TypeScript I/O 配置将被忽略是固有的，并且 Webpack 的entry/output配置在构建中优先。所有其他 TypeScript 相关设置均取自tsconfig.json，如ts-loader 文档中所述："The tsconfig.json file controls TypeScript-related options so that your IDE, the tsc command, and this loader all share the same options."

我希望以增量方式转换我的项目

以逐步的方式从JavaScript迁移到 TypeScript非常好！

希望，这有帮助。