README

enhanced-tsconfig-paths-webpack-plugin

Load modules according to the closest tsconfig.json's paths in webpack, working greatly in Monorepo.

When resolving modules in webpack, it will use the closest tsconfig.json' paths of the file, for example:

.
├── apps
│   ├── package.json
│   ├── src
│   │   ├── common
│   │   │   └── index.ts
│   │   └── index.ts
│   ├── tsconfig.json             // app's tsconfig.json, define its tsconfig.json's paths
│   └── webpack.config.ts
├── libs
│   ├── package.json
│   ├── src
│   │   ├── index.ts
│   │   └── utils
│   │       └── index.ts
│   └── tsconfig.json             // lib's tsconfig.json, define its tsconfig.json's paths too
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── README.md

In the example above, app import lib using @bright/shared, when we start app using webpack, this plugin will load each file's closest tsconfig's paths(in apps it will load apps/tsconfig.json, in libs, it will load libs/tsconfig.json), and redirect it to the real path.

Quick Start

Install

# npm
npm install -D enhanced-tsconfig-paths-webpack-plugin

# or yarn
yarn add -D enhanced-tsconfig-paths-webpack-plugin

# or pnpm
pnpm add -D enhanced-tsconfig-paths-webpack-plugin

Usage

// webpack.config.ts
import { join } from 'path';
import { Configuration } from 'webpack';
import { EnhancedTsconfigWebpackPlugin } from 'enhanced-tsconfig-paths-webpack-plugin';

export default {
  entry: './src/index.ts',
  output: {
    path: join(__dirname, 'dist'),
    filename: 'index.bundle.js'
  },
  resolve: {
    extensions: ['.ts', 'js'],
    plugins: [
      // using EnhancedTsconfigWebpackPlugin
      new EnhancedTsconfigWebpackPlugin()
    ]
  },
  mode: 'production',
  module: {
    rules: [
      {
        test: /.+\.ts$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true
        }
      }
    ]
  }
} as Configuration;

Warning1: If you are using ts-loader to transpile typescript, please set transpileOnly: true to skip type-checking, or an type error may be throwed.

Warning2: node_modules is ignored by default, the ignoreNodeModules option can configure this behavior

Options

ignoreNodeModules

since 0.2.0

default: true

ignore mapping files under node_modules. Example:

new EnhancedTsconfigWebpackPlugin({
  ignoreNodeModules: false
}),

tsconfigPaths

since 0.2.0

default: { extensions: [...Object.key(require.extensions), '.tx', '.tsx'] matchAll: true mainFields: ['main'] }

options passed to tsconfig-paths.

new EnhancedTsconfigWebpackPlugin({
  tsconfigPaths: {
    extensions: ['.ts'], // only map .ts file
    mainFields: ['main'], // main package.json's main field
    matchAll: true // add a extra * before matching, this is how typescript works
  }
})

Contribution

$ npm install -g pnpm@6.10.3
$ pnpm start

Usage no npm install needed!