typescript - 如何配置 Webpack 从其 src 文件夹而不是 dist 加载模块？

Question

我正在开发一个 monorepo，因此我希望 Webpack 从 src 加载我的源代码而不是 dist (dist 在 package.json 中指定)。

例如给定以下结构:

/packages/core/dist/index.js (compiled output)
/packages/core/src/index.ts (original TypeScript source)
/packages/core/package.json (`main` and `module` point to `dist`)

现在里面 /packages/foo/src/index.ts我在做 import Foo from '@test/core' .问题是 Webpack 读取 core包的 package.json并使用它的 module和 main指向 dist 的字段文件夹。我希望 Webpack 从 src 加载原始源。 , 因为这个 @test/core是我自己的代码库的一部分，而不是外部依赖项。

有没有办法强制 Webpack 只为某些模块加载我的原始 TS 源，例如以 @test/ 开头的模块?

Answer 1

您可以使用 resolve alias .

例如，假设您的 webpack 配置位于 packages 文件夹上方:

{
  resolve: {
    extensions: [".ts", ".js", ".json"],
    alias: {
      "@test/core": path.resolve(__dirname, "packages/core/src")
    }
  }
}

然后你可以像往常一样使用 require ，但是任何以 @test/core 开头的路径将解析为 path.resolve(__dirname, "packages/core/dist") .

require("@test/core") => packages/core/src/index.ts

require("@test/core/module") => packages/core/src/module.ts

如 .ts是一个非标准扩展，您必须将其添加到 resolve.extensions .