A guide on setting up Webpack to directly load a module from its source folder rather than the distribution folder

Question

A guide on setting up Webpack to directly load a module from its source folder rather than the distribution folder

Currently, I am involved in a monorepo project and I need Webpack to fetch my source files from the src directory instead of the dist folder (as specified in the package.json file).

Let's consider the structure below:

/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`)

Now, within the /packages/foo/src/index.ts file, I have an import statement like import Foo from '@test/core'. The issue arises when Webpack reads the core package's package.json because it uses the module and main fields pointing to the dist folder. In this case, I need Webpack to load the original sources from the src directory as @test/core is part of my internal codebase and not an external library.

My question is: Is there a method to instruct Webpack to exclusively load the original TypeScript sources for specific modules that start with @test/?

typescript webpack package.json lerna monorepo

Answer 1

Answer №1

To simplify your file paths, you can implement a resolve alias in your webpack configuration.

For instance, if your webpack config is located above the packages folder, you can do the following:

{
  resolve: {
    extensions: [".ts", ".js", ".json"],
    alias: {
      "@test/core": path.resolve(__dirname, "packages/core/src")
    }
  }
}

Now, whenever you use require with paths starting with @test/core, they will be resolved to

path.resolve(__dirname, "packages/core/dist")

.

require("@test/core") => packages/core/src/index.ts
require("@test/core/module") => packages/core/src/module.ts

Since .ts is not a standard extension, make sure to include it in resolve.extensions.

Answer 2

To simplify your file paths, you can implement a resolve alias in your webpack configuration.

For instance, if your webpack config is located above the packages folder, you can do the following:

{
  resolve: {
    extensions: [".ts", ".js", ".json"],
    alias: {
      "@test/core": path.resolve(__dirname, "packages/core/src")
    }
  }
}

Now, whenever you use require with paths starting with @test/core, they will be resolved to

path.resolve(__dirname, "packages/core/dist")

.

require("@test/core") => packages/core/src/index.ts
require("@test/core/module") => packages/core/src/module.ts

Since .ts is not a standard extension, make sure to include it in resolve.extensions.

Answer 3

Answer №2

I managed to fix this issue using the NormalModuleReplacementPlugin:

Here's what I added to my Webpack configuration:

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

Since I'm working with TypeScript, I also made sure to include the .ts extension in:

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

Now when I import @test/xyz, it will be treated as @test/xyz/src/index -- and TypeScript files (.ts) will take precedence.

Answer 4

I managed to fix this issue using the NormalModuleReplacementPlugin:

Here's what I added to my Webpack configuration:

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

Since I'm working with TypeScript, I also made sure to include the .ts extension in:

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

Now when I import @test/xyz, it will be treated as @test/xyz/src/index -- and TypeScript files (.ts) will take precedence.

A guide on setting up Webpack to directly load a module from its source folder rather than the distribution folder

Answer №1

Answer №2

Similar questions

WebStorm highlights user-defined Jasmine matchers as mistakes and displays `TypeScript error TS2339: Property 'matcher' does not exist on type 'ArrayLikeMatchers '`

When parameters are added to one route, all other routes cease to function properly

Using Pocketbase OAuth in SvelteKit is not currently supported

Step-by-step guide on incorporating an external library into Microsoft's Power BI developer tools and exporting it in PBIVIZ format

How can I embed an iframe in an Angular 4 application?

Issue with using react-signature-canvas inside an ant design Modal

Exploring the process of selecting checkboxes in Angular 6

Error: Code cannot be executed because the variable "sel" has not been defined in the HTML element

I am encountering problems with images that are imported as module imports in a Vue.js project

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

Filtering the data in the table was successful, but upon searching again, nothing was found. [Using Angular, Pagination, and

Tips for extracting data from an Angular object using the *ngFor directive

Transforming TypeScript: converting to a comparable type

Tips on setting up Storybook.js with Next.js, utilizing Ant Design, Less, and TypeScript

Angular 5: ngModelChange not triggering API call on bad request

How can Firebase and Ionic be used to customize the password reset template for sending verification emails and more?

Angular obtains an undefined response from a service

Working with Array of Objects Within Another Array in Angular 6 Using Typescript

What is the method for designating a precise subtype within an interface?

Is it possible to export all types/interfaces from .d.ts files within multiple folders using index.ts in a React TypeScript project?