前端热门插件和工具使用

Webpack

1.webpack的核心概念

Entry：入口，Webpack进行打包的起始点(文件)
Output：出口，webpack编译打包生成的bundle(打包文件)
Loader：模块加载(转换)器，将非js、非json模块包装成webpack能理解的js模块
Plugin：插件，在 Webpack 构建流程中的特定时机插入具有特定功能的代码
Module：模块，在 Webpack眼里一切皆模块，默认只识别js文件, 如果是其它类型文件利用对应的loader转换为js模块

2.webpack模块化打包的基本流程

连接: webpack从入口JS开始, 递归查找出所有相关联的模块, 并【连接】起来形成一个图(网)的结构
编译: 将JS模块中的模块化语法【编译】为浏览器可以直接运行的模块语法(当然其它类型资源也会处理)
合并: 将所有编译过的模块【合并】成一个或少量的几个bundle文件, 浏览器真正运行是打包生成的bundle文件

3.loader与plugin区别

loader: 用于加载编译特定类型的资源文件, webpack本身只能打包js。loader即为文件加载器，操作的是文件，将文件A通过loader转换成文件B，是一个单纯的文件转化过程。
plugin: 是一个扩展器，丰富webpack本身，增强功能，针对的是在loader结束之后，webpack打包的整个过程，他并不直接操作文件，而是基于事件机制工作，监听webpack打包过程中的某些节点，执行广泛的任务。如果loader处理不了的资源可以交给插件处理。

4.常用的loader和plugin有哪些

常用的loader：babel-loader、css-loader、css-loader、eslint-loader、file-loader、url-loader、

常用的plugin：clean-webpack-plugin、copy-webpack-plugin、html-webpack-plugin、css分离和压缩插件

5.区别live-reload（自动刷新）与hot-realod/HMR（热更新）

相同点：代码修改后都会自动重新编译打包

不同点:

live-reload: 刷新整体页面，从而查看到最新代码的效果, 页面状态全部都是新的。
Hot-reload: 没有刷新整个页面，只是加载了修改模块的打包文件并运行，局部更新，整个界面的其它部分的状态还在。

Echarts

1.Echarts常用方法

echarts.init(el) 初始化echarts实例
myChart.setOption(option) 通过配置项生成图表

Axios

1.Axios 是什么

Axios 是一个基于 promise 的 HTTP 请求库，可以用在浏览器和 node.js 中（通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的）。

2.Axios 特点

基于 promise 的异步 ajax 请求库，支持promise所有的API
浏览器端/node 端都可以使用，浏览器中创建XHR（XMLHttpRequests），在node中二次封装了http模块
支持请求拦截器／响应拦截器
可以转换请求数据和响应数据，并对响应内容自动转换成 JSON类型的数据
安全性更高，客户端支持防御 XSRF

3.请求和响应拦截使用及作用

使用Axios.interceptors.request.use(config=>{return config},err=>{}) 和 Axios.interceptors.response.use(response=>{return response.data},err=>{}) 做请求和响应拦截。