Как настроить Webpack для загрузки модуля из его папки src вместо dist?

Question

Я работаю над монорепо, и поэтому я хочу, чтобы 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

Вы можете использовать разрешение псевдонима .

Например, если ваша конфигурация веб-пакета находится над папкой пакетов:

{
  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.