TypeScript path aliases and Webpack resolve.alias interoperability

To maintain a single source of truth for TypeScript path aliases and Webpack, you should avoid manual duplication between tsconfig.json and webpack.config.js. The most effective approach is using plugins that dynamically translate your TypeScript configuration for Webpack.

The Automated Solution: tsconfig-paths-webpack-plugin

The industry-standard tool is the tsconfig-paths-webpack-plugin. This plugin reads the compilerOptions.paths from your tsconfig.json and automatically maps them to the Webpack resolver.

• Install the plugin: npm install --save-dev tsconfig-paths-webpack-plugin
• Update your webpack.config.js to include the plugin:

const TsconfigPaths = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // ... other config
  resolve: {
    plugins: [new TsconfigPaths({
      configFile: './tsconfig.json'
    })]
  }
};
  

This ensures that any alias added to your tsconfig.json is immediately recognized by Webpack without further manual intervention, eliminating the drift between development and production.

Handling Local Development with ts-node

Since ts-node does not natively resolve TypeScript paths at runtime, development will fail if you use aliases. To fix this without changing your code, use the tsconfig-paths register hook:

npx ts-node -r tsconfig-paths/register src/index.ts

Build-Time Verification and Linting

To verify that emitted import strings match your alias map before the bundle is produced, you can use eslint-plugin-import. This allows you to validate that every import statement points to a valid file based on your TypeScript settings.

Configure your .eslintrc.js to use the TypeScript resolver:

module.exports = {
  settings: {
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
      },
    },
  },
  rules: {
    'import/no-unresolved': ['error', 'n'],
  },
};

Assumptions and Constraints

This approach assumes you are using standard directory-based mapping in tsconfig.json. If your aliases use complex regex patterns (e.g., @utils/(.*)@), the plugin may require manual adjustments in the baseUrl setting to ensure deep nesting resolves correctly. Additionally, these tools verify the existence of modules; they do not rewrite your source code—that remains the job of the Webpack transformation process.