如何配置 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 并使用其指向 dist 文件夹的 module 和 main 字段。相反，我希望 Webpack 从 src 加载原始资源，因为这个 @test/core 是我自己的代码库的一部分，而不是外部依赖项。

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

Answer 1

我用 NormalModuleReplacementPlugin 解决了它：

我把它放在我的 Webpack 配置中：

 plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /@test\/[a-z]+$/,
      resource => {
        resource.request = resource.request + '/src/index'
      }
    )
 ]

由于我使用的是 TS，因此我还必须添加 .ts 扩展名：

resolve: {
  extensions: ['.ts', '.tsx', '.js', '.jsx']
}

现在导入 @test/xyz 将导入为 @test/xyz/src/index -- 它会首先查找 .ts 扩展名。

Answer 2

您可以使用 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 是一个 non-standard 扩展，您必须将其添加到 resolve.extensions。

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

How to configure Webpack to load a module from its src folder instead of dist?

typescript

webpack

package.json

lerna

monorepo