webpack
- webpack自身:只打包js文件
- webpack的loader和plugin:
- babel-loader:解析es6为js
- css-loader:解析css文件
- style-loader:将解析后的css放到style标签中放到js中
- file-loader:解析图片和字体;/.(png|jpg|svg|gif)$/,/.(woff|woff2|ttf|otf|eot)$/
- extract-text-webpack-plugin:将css从js中拆分出来,单独打包为css文件
- html-webpack-plugin:以某个用户自定义的html为模板,自动生成html;并把打包后的js、css、img等引入该生成后的html
babel
Babel 是一个 JavaScript 编译器
- @babel/cli:命令行转码工具
- @babel/preset-env:转码规则
- @babel/core:转换JavaScript句法(syntax),一部分API
- @babel/polyfill:转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)。
- babel-loader:webpack解析babel的loader