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仅为某些模块（例如以@test/开头的模块加载原始TS源？

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。

Answer 2

我用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扩展名。

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

2 个答案: