webpack 打包和 babel 打包有什么区别？

Question

下面是 babel 打包

"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
"build:es": "cross-env BABEL_ENV=es babel src --out-dir es",

下面是 webpack 打包

"dev": "webpack --mode development",
"build": "webpack --mode production",

请问下，为什么会出现两种打包风格？难道 webpack 不能同时打包成 commonjs 和 es 吗？

Answer 1

1.babel是将es6转换成es5，转换后的代码遵循COMMONJS规范，浏览器是不能识别的，直接运行会报错；但是babel编译之后的代码体积较小；
2.借助webpack编译打包，可以实现代码在浏览器上运行但打包体积较大。
综上个人认为：直接用bable编译的代码大部分是一些公共方法之类，不单独使用需其他文件引入；而webpack打包的文件是直接运行的文件。

补充（百度到的）
1.[关于webpack，babel，以及es6和commonJS之间的联系
(https://blog.csdn.net/a250758...