TypeScript path aliases and Webpack resolve.alias interoperability
0 reputation · 18 Mar 2020, 03:50 UTC
The goal is to have TypeScript path aliases work seamlessly in both local development (using ts-node or similar) and in the final production bundle created by Webpack.
The constraint is that TypeScript’s paths option only influences the compiler’s module resolution and does not alter the import strings emitted into the JavaScript files, so the bundle still contains the raw alias specifier (e.g., import from '@utils/helpers') that Webpack must be configured to map to a real file path.
The uncertainty lies in keeping the alias definitions in tsconfig.json and Webpack’s resolve.alias in sync; any divergence can go unnoticed during development but cause runtime 'Cannot find module' errors after the build, making the failure mode hard to detect without extra tooling.
What automated approaches can generate a single source of truth for both TypeScript paths and Webpack alias configuration?
Are there linting or build‑time plugins that can verify that emitted import strings match the bundler’s alias map before the bundle is produced?