webpack题

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

• $nextTick(callback)
  数据更新，触发dom更新执行的回调函数
• $set(更新数据，key，value）
  强制更新数据与视图（数组下标更新，更新视图）
• $on 监听事件
• $off 移除监听
• $emit(事件名，事件值)
• mixins 混入
• extends 获取实例的构造函数
• use 使用插件（执行插件的install方法）
  百度
  

webpack中plugin与loader区别

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

列出你常用的5个plugin

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

列出你常用的5个loader

css-loader,style-loader,less-loader ,babel-loader(ES6-ES5)
vue-loader,url-loader,file-loader( 把图片文件base64格式)

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

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

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

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命名 合理缓存

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.NODE_ENV, //产品模式| development

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

devServer:{
proxy:{
    "/api":{
    "target":"http://www.520mg.com/",
    "changeOrigin":true,
    onProxyReq(proxyReq, req, res) {
        proxyReq.setHeader('Referer', 'https://m.mi.com/'); 
					 
   }
    }
}
}

bind与call和apply的区别

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

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.

react 优点有？

1. 组件化思维
2. 单向数据流
3. jsx语法方便
4. 虚拟Dom节点保障优化下线。reactNative
5. 市场应用广，生态丰富（插件多）

什么是jsx语法，有什么特点？

javascript和xml（html）混合一种模板语法

• { }书写js
• {/**/}书写注释
• class更改为className
• 只有一个根节点
• 数组可以包含html节点，
• 对象会自动展开

写一个react函数组件

function App(){
    return (<></>)
}
export default App

写一个react 类组件

import React,{Component} from 'react'
export default class App extends Component{
    constructor(props){
        super(props);
        this.state = {}
    }
    render(){
        return (<></>)
   }
}

react如何传递参数，子组件如何获取父组件传入数据

• 通过属性传递参数
• 通过props获取父组件传入参数

react如何实现表单双向绑定

• 实现一个受控组件

<input value={this.state.msg} onChange={this.changeMsg}>

react如何创建dom节点引用的

1. 导入
   import {createRef} from ‘react’
2. 创建
   this.inputRef = createRef()
3. 引入
   <input ref={this.inputRef}/>
4. 访问节点
   this.inputRef.current

react如何实现事件绑定？

把事件名改成驼峰式

<div onClick={this.clickHd}>

react 组件如何设置默认参数

User.defaultProps = {}

react脚手架安装命令是？创建命令是？

npm i -g create-react-app
create-react-app 项目名称