有关webpack的一些问题的解答

1.写出vue高级方法 5个并列出含义

• $nextTick（callback）
  触发dom更新执行的回调函数
• $set（更新数据，key，value）
  强制更新数据与视图（数组下表更新，视图更新），
• $mixins 混入
• $emit 子组件向父组件传递参数
• $on 监听事件
• $off 移除监听
• $extend 获取实例的构造函数

2. webpack中plugin与loader区别

plugin：在webpack执行过程中（生命周期）额外处理一些事项，压缩，清理，抽出
loader：把非js文件转换为webpack可以处理的模块

3. 列出你常用的5个plugin

html-webpack-plugin 处理html
min-css-extract-plugin抽出css
clean-webpack-plugin 清理dist目录
copy-webpack-plugin 拷贝文件（静态资源目录）
css压缩优化插件，js压缩优化插件

4. 列出你常用的5个loader

css-loader
style-loader
less-loader
babel-loader（ES6-ES5）
vue-loader
url-loader
file-loader（把图片文件base64格式）

5. 不用vue脚手架如何搭建基于webpack的vue项目

vue-loader 加载.vue文件
vue-template-compiler 转换template为render函数
vue-style-loader 处理css
vue-hot-reload-plugin 热更新

moudle:{
 rules:[
 test:/\.vue$/],
 loader:"vue-loader",
 options:{...}
 }]
}

6. webpack常见的优化方式有哪些

1. 压缩：压缩css，html，js，图片
2. 分清mode产品模式与开发模式
3. 合理devtool:sourceMap
4. 组件treeShake 摇树（只加载需要的模块内组件）
5. 异步加载 import()
6. UI组件库的按需加载 babel-xxx插件 按需导入组件
7. webpack魔法注释/webpack-prefetch:true/预加载
8. 通过hash命名，合理缓存

7.webpack如何优雅切换环境，跨平台传参

1. 压缩
   压缩css，html，js，图片
2. 分清 mode产品模式与开发模式
3. 合理devtool:sourceMap
4. 组件treeShake 摇树（只加载需要的模块内组件）
5. 异步加载 import()
6. UI库组件的按需加载 babel-xxx插件 按需导入组件
7. webpack魔法注释/webpack-prefetch:true/ 预加载
8. 通过hash命名 合理缓存

8.写一个跨域代理http://www.520mg.com/api/list.php

module.exports = {     //模块导出
	devServer: {       //本地开发服务器配置
		proxy: { 
			".php": {  //代理标识符为.php当遇到.php就会把请求域名修改为target
				target: "http://www.520mg.com/", // 替换的域名
				changeOrigin: true,
				onProxyReq(proxyReq, req, res) {
					//当发送请求时候，添加Referer请求头
					proxyReq.setHeader('Referer', 'https://m.mi.com'); 
				}
			},
		}
	}
}

9.bind与call和apply的区别

bind返回新的函数
apply和call都是执行一个函数
共同点
call、apply和bind都是用于改变方法中this指向的。
不同点

1. call调用 将方法中的this指向call中第一个参数，当第一个参数为null、undefined时，默认指向window
2. apply与call相似，不同之处在于传递给方法的参数形式不一致。
   apply传递给方法的参数是数组的形式。
3. call和apply在改变方法的this指向时，会同时执行方法；
   而bind不会执行方法，而是返回改变this指向后的新方法。

10.jquery 无new化操作的原理

1. 工厂函数

function JQuery(select){
    return new JQuery.fn.init(select)
}

2. 构造函数

JQuery.fn.init=function (select){
   ....
   return this;
}

3. 重新指定原型

JQuery.fn.init.prototype = JQuery.fn.