webpackで、プロジェクトのファイルを@ディレクトリ配下でimportできるような設定

webpackだとsymlink貼ったり NODE_PATH をいじったりする必要はない

差分

webpack.config.js を変更しないとビルドできない

   resolve: {
+    alias: { '@': path.resolve(__dirname, './src/') },
     extensions: ['.ts', '.tsx', '.js']
   },

正常にビルドできても vscode でエラーになるので tsconfig.json も設定を入れる必要がある

+    "baseUrl": "./",
+    "paths": { "@/*": ["src/*"] },

jest実行時の設定も必要

+  "moduleNameMapper": {
+    "^\@/(.*)$": "<rootDir>/src/$1"
+  },

参考

• Solve Module Import Aliasing for Webpack, Jest, and VSCode