如何配置 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

您可以使用解析别名。

例如，假设您的 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.