我要用啥？
js的話：babel編譯+webpack模塊打包
ts的話：tsc編譯成js+babel編譯+webpack模塊打包
瀏覽器情況：如果您的瀏覽器支持es6所有語法那么就可以只用webpack來處理模塊部分，如果你的瀏覽器連模塊部分也支持，那我覺得就不需要任何工具了。當然如果你只是寫了es5的語法也沒有模塊，那么也不需要任何工具
服務器情況：如果你用的是node，那么node是直接支持js新老語法和模塊化的，也不需要任何工具，頂多你需要做得就是用tsc將其轉為js這一步就行了
工具干什么的？
tsc：typescript自己的cli，編譯ts為js，如果編譯成es6了，瀏覽器不兼容，他也不管，他只管編譯成js。這個時候就需要babel出場了
babel：編譯新版js適配瀏覽器的代碼，如果有新語法 或者新api，他會將其新語法轉成老語法，新api做墊片處理來兼容，總之他能搞定就對了，但是他無法處理模塊化
webpack：主要用來處理模塊化的，當然也能打包 壓縮等。因為babel不會處理模塊化部分比如import export require等
多管閑事的這些家伙們？
babel的進化
babel7已經可以直接支持編譯tc了，這樣一來tsc就沒用用處了。
但是，tsc是微軟自己發明支持人家ts的工具，編譯出來的代碼我看了下，要比babel干凈，適合人看。
究其原因是因為tsc只管編譯成js，而不管兼容性，而babel自然還要做語法轉義和墊片處理
webpack的附加功能
webpack不僅僅能處理模塊，它能夠將這些[tsc、babel]工具以plugin或者loader的形式包容進去，這樣一來，我們也可以不單獨再額外的用babel去處理兼容問題了
我們可以在webpack里使用ts-loader或者只用babel-loader做處理
總結
所以最后的總結是：我們只用webpack就行了，就可以把js或者ts搞定，編譯成瀏覽器可執行的代碼
悄悄話
除了webpack能解決模塊化方案，你的選擇還有browserify，它和webpack處理模塊化思路一樣，都是預編譯。
另外如果你知道sea.js和require.js那么用這種類庫的方式來支持其對應的模塊語法也行。
配置文件
webpack的ts-loader實際上就是調用了tsc命令 所以需要tsconfig.js配置文件
webpack的babel-loader實際上就是調用了babel命令，也需要babel.config.js配置文件，但是我看大家將配置整合在了webpack中，可能少建一個文件吧
如果單獨使用babel工具去處理ts的話，是不需要額外的安裝ts和創建tsconfig.json的，那么對應的babel-loader也一樣，
大致意思就是說，使用我babel處理ts就不用再安裝任何ts第三方相關的東西了，我自己知道怎么處理。