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

Question

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

（我目前正在开发 node 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交互的本质是什么？我无法从 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 还是反之亦然？推荐策略是什么？

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

编辑：经过深思熟虑，我还需要再次说明。我猜当你构建一个 TS/WP 项目时，TS 编译器首先运行创建所有 .js 文件（假设在 .dist 文件夹中）。然后 webpack 打包所有生成的 .js 文件。因此，假设这是正确的，那么我是否需要配置 webpack 以将 dist 文件夹中的 .js 文件用作其输入，而不是项目源中的 .js 文件（即 ./lib 下的所有内容，这是我的源 js 文件所在的位置）是)?

我希望以增量方式转换我的项目，所以我刚才所说的并不能真正满足我的需要。 Webpack 需要从 ./dist 中获取一些 .js 文件，并从 ./lib 中获取一些尚未转换为打字稿的文件。不知道如何修改工程增量升级

Answer 1

[...] there appears to be some configuration settings that can appear in webpack and typescript, so which takes precedence?

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

which files are included in compilation? [...] Another example is the output file. [...] So in this scenario, does webpack override typescript or vice-versa? What is the recommended strategy?

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

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

I am guessing when you build a TS/WP project, the TS compiler runs first creates all the .js files (let's say in the .dist folder). Then webpack bundles all the generated .js files.

这不太正确。但是你这么说很好，因为它更清楚地说明了你的核心理解问题。 Webpack 中的所有内容都以您在配置中指定的 entry point 开头——如果您愿意，这就是输入。从这个入口模块开始，webpack 考虑所有其他传递导入的模块（例如通过 import 或 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 docs 中所述："The tsconfig.json file controls TypeScript-related options so that your IDE, the tsc command, and this loader all share the same options."

I was hoping to convert my project in an incremental manner

从JavaScript to TypeScript逐步迁移是完全没问题的！

希望对您有帮助。

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

Webpack using Typescript: Common settings in both configs, so which take precedence?

javascript

typescript

tsconfig

webpack