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. 在package.json指定配置文件

"script":{
	"dev":"webpack -config mypack.config.js"
}

2. 安装corss-env插件 跨平台传参

 "scripts": {
    "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve", 
  },
//webpack.config.js
//src源文件目录都可以获取传入的参数
mode:process.env.NOOD_ENV,//产品模式|development

8. 写一个跨域代理

module.exports = {
	devServer: {
		open: true,
		proxy: {
			      "/api": {
        				target: "http://www.520mg.com/",
        				changeOrigin: true,
        				onProxyReq(proxyReq,req,res) {
          					proxyReq.setHeader("Referer", "http://www.520mg.com");
       					 },
      				},
		}
	}
}

9.bind与call和apply的区别

不同点：
bind返回一个新的函数
apply和call都是执行一个函数
共同点：
都是改变this指向
apply是数组形式传参

10. jquery 无new化操作的原理

1. 工厂函数

function jQuery(select) {
        return new jQuery.fn.init(select);
    }

2. 构造函数

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

3. 重新指定

<span style="color;red">原型</span>
JQuery.fn.init.prototype = JQuery.fn