ts-loaderとbabel-loaderを組み合わせる babel-loaderだけで、TypeScriptはトランスパイルが可能です。 具体的には @babel/preset-typescript を使います。 もしBabelが必要な状況なのであれば、ts-loaderは必要ありません。 逆に、Babelが不要なのであればts-loaderが必要です。 しかし、 レガシーブラウザ向けにBabelを通したもの モダンブラウザ向けにTSをトランスパイルしただけのもの の両方が必要な場合は、自分はts-loaderとbabel-loaderを組み合わせるようにしています。 私の環境ではtsconfig.jsonはいずれの場合も次のようなイメージでした。 project │ .babelrc │ package-lock.json │ package.json │ tsconfig.json
![【webpack5】ts-loader + babel-loader を併用する【TypeScript】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ebe015336a94939f09c552c8cc9a0dfa32d887d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwd2VicGFjazUlRTMlODAlOTF0cy1sb2FkZXIlMjAlMkIlMjBiYWJlbC1sb2FkZXIlMjAlRTMlODIlOTIlRTQlQkQlQjUlRTclOTQlQTglRTMlODElOTklRTMlODIlOEIlRTMlODAlOTBUeXBlU2NyaXB0JUUzJTgwJTkxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05NDFiZTAwNmE2Y2RhYmI1OWRmY2U5MWViYzgwMjE5Yg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwaGVwcG9rb2Zyb250ZW5kJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03MzNiYzFkMWYwZDk4NTJhM2NjMjA0ODQzZjE2YmRmNg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De6c5149098a2a78594e852eef6b6104d)