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

Question

我正在使用单体库，因此希望Webpack从src而不是dist中加载我的源代码（在package.json中指定了dist）。

例如，给定以下结构：

/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源代码？

- Kai Sellgren

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中。

- sdgluck

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

- Kai Sellgren