简单了解 webpack 和 babel 做了什么

webpack

1. webpack自身：只打包js文件
2. webpack的loader和plugin：

1. babel-loader：解析es6为js
2. css-loader：解析css文件
3. style-loader：将解析后的css放到style标签中放到js中
4. file-loader：解析图片和字体；/.(png|jpg|svg|gif)$/，/.(woff|woff2|ttf|otf|eot)$/
5. extract-text-webpack-plugin：将css从js中拆分出来，单独打包为css文件
6. html-webpack-plugin：以某个用户自定义的html为模板，自动生成html；并把打包后的js、css、img等引入该生成后的html

babel

Babel 是一个 JavaScript 编译器

1. @babel/cli：命令行转码工具
2. @babel/preset-env：转码规则
3. @babel/core：转换JavaScript句法（syntax），一部分API
4. @babel/polyfill：转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）。
5. babel-loader：webpack解析babel的loader