webpack小知识

### 写出vue高级方法 5个并列出含义 
- $nextTick(callback)
数据更新,触发dom更新执行的回调函数
- $set(更新数据,key,value)
强制更新数据与视图(数组下标更新,更新视图)
- $on  监听事件
- $off 移除监听
- $emit(事件名,事件值)
- mixins 混入
- extends  获取实例的构造函数
- use 使用插件(执行插件的install方法)
![全局方法](https://upload-images.jianshu.io/upload_images/3806201-94467ebb3c11adb5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


###  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 热更新
```js
moudule:{
 rules:[{
test:/\.vue$/,
loader:"vue-loader",
options:{...}
}]
}
```
### webpack常见的优化方式有哪些
1. 压缩
压缩css,html,js,图片
2. 分清 mode产品模式与开发模式
3. 合理devtool:sourceMap
4.  组件treeShake 摇树(只加载需要的模块内组件)
4. 异步加载 import()
5. UI库组件的按需加载  babel-xxx插件 按需导入组件
6. webpack魔法注释/*webpack-prefetch:true*/ 预加载
7. 通过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. 重新指定<span style="color;red">原型</span>
```
JQuery.fn.init.prototype = JQuery.fn.
```

上一篇:webpack学习---css兼容性问题


下一篇:webpack学习---生产模式--将css从js中提取出来,形成css文件