如果写超过es5版本的js，或者ts等。是需要babel来进行编译的。
但是babel值编译，如果遇到模块化他就无能为力了
需要webpack对其进行模块化打包功能。
通常babel编译+webpack处理模块打包压缩等，挺好的。是完美的方案

但是webpack它不老实。它想牛逼，于是他就内置了不用任何配的情况下，就支持对es6的编译环节。您只管使用webpack命令，他就支持编译+模块处理打包了。但是稍微高端的就不行，比如我要编译ts等，就需要引入ts-loader了。

但是人家ts也不是吃白饭的啊，人家自己的语言  自己肯定要提供编译的cli呀。于是tsCli之tsc命令人家自己也能编译ts为浏览器或者node可运行的代码。

 

那也就是说  后端node开发人可以直接用tsCli或者babelCli来处理ts代码

前端因为浏览器目前2019年均不直接支持模块化，所以需要进行搭配来使用
如果您的代码是es6，且没有用模块，那么用chrome直接运行即可，无需任何处理，我自己测试了，chrome支持良好。
如果你不放心，或者还要支持其他浏览器，那么你可以用babel编译一下子，是的不推荐你用webpack，因为你没有用模块化功能，所以浪费了，webpack肯定要比babel重

 

若果您的代码有es6以及其模块化，那么推荐您直接上webpack，因为它既能处理es6普通语法，也能处理模块化。当然你可以先用babel编译成es5+webpack去处理模块化，可这不是脱了裤子放屁多次一举么

如果你的代码有ts且没有模块化，babel和tsc都行，如果你的代码ts和模块化，webpack也行就是浪费性能呗，
如果你的代码ts和模块化，那么就是webpack咯，配上其ts-loader一起合成。当然也可以先用babel或者tsc编译成es5+webpack去处理模块化，可这不也是脱了裤子放屁多次一举么

 

综上，条条大路通罗马，如果您要记不住，那就统统用webpack吧。