Javascript 使用Typescript的网页包：两种配置中的公共设置，那么哪个优先？

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

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

例如，主要的例子是编译中包含哪些文件

在网页包配置中，您可以指定使用规则选择哪些输入文件：

  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配置中，我有以下内容：

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

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

定义“application bundle.js”的是“dist”文件夹中的输出文件

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

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

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

（我目前没有定义outFile属性，但我知道您可以这样做，但如果能够这样做，就会产生歧义，从而造成混乱）。那么在这种情况下，webpack会覆盖typescript吗，反之亦然？建议的策略是什么

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

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

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

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

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

编译中包括哪些文件？[…]另一个例子是输出文件。[…]那么在这种情况下，webpack会覆盖typescript吗，反之亦然？建议的策略是什么

简单地说，TypeScript和Webpack都处理/转换输入文件，并在目标目录结构或文件包中发出输出-都需要一些输入/输出配置信息。TypeScript编译器可以独立运行，也可以作为文件处理器集成到更大的Web包构建中。使用

outFile

选项，TypeScript甚至可以被视为一个独立的迷你绑定器，因为它将所有

.ts

-文件绑定到单个目标文件

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

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

这是不完全正确的。但很好，你这么说，因为它让你的核心理解问题更加清晰。网页包中的所有内容都以您在配置中指定的开始-如果您愿意，这就是输入。在此输入模块中，webpack考虑所有其他可传递导入的模块（例如，通过

导入

或

要求

），并创建依赖关系树

依赖关系树中的每个文件都可以选择通过转换，也可以像文件处理管道一样链接。因此

ts加载器

和底层TypeScript编译器使用

test:/\.ts（x？$/

谓词为.ts/.tsx文件应用转换

综上所述，该网页包考虑了您的输入文件，这导致了大量进一步导入的.ts/.tsx文件（在其他文件类型中，我们忽略了它们）。对于每个文件，TypeScript加载器将在加载器处理管道的过程中被调用。因此，TypeScript I/O配置将被忽略，网页包的

条目

/

输出

配置在生成中优先。所有其他与TypeScript相关的设置都取自

tsconfig.json

，如：

“tsconfig.json文件控制与TypeScript相关的选项，以便IDE、tsc命令和此加载程序都共享相同的选项。”

我希望以渐进的方式转换我的项目

以循序渐进的方式从中迁移是非常好的

---

希望有帮助。

没问题！（我正在复习你的答案）嗨，福特04，谢谢你的答案，它真的帮助很大。我的观点是，不要放弃现有的项目。我将启动一个新的typescript项目，并逐步转换功能。这是管理我目前看到的混乱类型脚本错误（特别是模块/名称空间/导入/导出）的唯一方法。干杯如果这是一个小项目，而且你负担得起，那就去做吧！如果您想在一个项目中尝试一下，我认为值得一看js迁移的最后一个链接，尤其是set