如果写超过es5版本的js，或者ts等。是需要babel来进行编译的。
但是babel只管编译，如果遇到模块化他就无能为力了
需要webpack对其进行模块化打包功能。
通常babel编译+webpack处理模块打包压缩等，挺好的。是完美的方案
但是webpack它不老实。它想牛逼，于是他就内置了不用任何配的情况下（尤其是webpack4，支持无配置文件就可以使用的牛逼技术），就支持对es6的编译环节。您只管使用webpack命令，他就支持编译+模块处理打包了，也就是说只是使用es6时，不用配置任何东西（但是稍微高端的就不行，比如我要编译ts等，就需要通过修改配置文件引入ts-loader了），也不需要babel辅助，直接全部处理。所以有些同学安装完webpack安装完后，写个es6代码 一编译结果就出来了：‘卧槽，这就行了啊，那babel的意义何在呢？’，这是这货瞎操心唯一的弊端，让人困惑的地方
但是人家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吧。
babel和tsc是编译代码工具。都无法处理模块化的东西，如果你的平台支持模块化，那么也不需要处理，比如node平台
那如果你的平台不能处理模块化，比如浏览器，那么就需要处理模块化部分了，而webpack就是干这个的
除了webpack能解决模块化方案，你的选择还有browserify，它和webpack处理模块化思路一样，都是预编译。
另外如果你知道sea.js和require.js那么用这种类库的方式来支持其对应的模块语法也行。
最后一句：‘他们这三种工具，配置文件不相互依赖和影响，比如webpack编译不受tsconfig和babel.config.js的影响，反之亦然’