时间戳

首页 > 解决方案 > 如何配置 Webpack 从其 src 文件夹而不是 dist 加载模块？

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

问题描述

我正在开发一个 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/？

标签： typescriptwebpackpackage.jsonlernamonorepo

解决方案

我解决了它NormalModuleReplacementPlugin：

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

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

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

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

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

推荐阅读