Vue相关知识点

1.MVVM
01.Vue中的MVVM

View层： * 视图层
在我们前端开发中，通常就是DOM层
主要作用是给用户展示各种信息

Model层： 数据层
数据可能是我们写死的固定数据，更多的是来自服务器，从网络上请求下来的数据

ViewModel层： 视图模型层
视图模型层是View和Model沟通的桥梁
一方面，它实现了Data Binding（数据绑定），将Model的改变实时反应到View中
另一方面，它实现了DOM Listener (DOM监听)，当DOM发生一些事情（如：点击、滚动、touch）时，可以监听到，并且 在需要的情况下改变对应的 data。

02.计数器案例中的MVVM

View 依然是DOM
Model 就是抽离出来的obj（对象）
ViewModel 就是创建的Vue对象实例

2.Vue的options选项
el: 类型：string | HTMLElemenet
作用：决定之后Vue实例会管理哪一个DOM

data: 类型：Object | Function (组件当中，data必须是一个函数)
作用：Vue实例对应的数据对象

methods: 类型： {[key.string]:Function}
作用： 定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

3.Vue简介
vue是一个渐进式的框架：可以将vue作为应用的一部分嵌入其中，
vue全家桶：Core + Vue-router + Vuex
Vue有很多特点和Web开发中常见的高级功能：
01.解耦视图和数据
02.可复用的组件
03.前端路由技术
04.状态管理
05.虚拟DOM
4.v-bind
01.v-bind 简介
前面我们学习的指令主要作用是将值插入到模版的内容当中去
但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定；
比如，动态绑定a元素的href属性，比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令
v-bind指令： 作用：动态绑定属性
简写： :

02、v-bind动态绑定class: 有两种方式： 对象语法 数组语法
对象语法：


数组语法：

03.v-bind动态绑定style
我们可以利用 v-bind:style 来动态绑定一些CSS内联样式。
在写css属性名的时候，可以使用驼峰式，如fontSize;或短横线分隔 ‘font-size’,记得用单引号引起来。
动态绑定style有两种方式： 对象语法 数组语法
对象语法 ：
对象的key是CSS属性名称；
对象的value是具体赋的值， 值可以来自data中的属性；

数组语法：

5.computed 计算属性
01.计算属性基本使用：

02.计算属性复杂操作
案例:计算所有书的总价格

03.计算属性的getter和setter方法
每一个计算属性都包含一个getter和一个setter

04.计算属性和methods的对比—计算属性的缓存
methods 和 computed 看起来都可以实现我们的功能，为什么还要多一个计算属性这个东西呢？
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。


6.v-on: 事件监听
v-on: 的语法糖 @
v-on 参数的传递
方法定义时，我们需要event对象，同时又需要其他参数。
在调用方法时，如何手动获取到浏览器的参数的event对象，$event。
**注意：**下面的a如果不加 ‘’，vue会将其解析为一个变量，而data里没有定义该变量，所以运行时会报错。

v-on 修饰符：

7.条件判断 v-show v-if v-else-if v-else
区别： v-if v-else 让节点从页面上移除；
v-show 控制节点 display:none;
如果需要频繁切换显示或消失，使用v-show比较好

v-if 当条件为false时，压根不会有对应的元素在DOM中；
v-show 当条件为false时，仅仅是将元素的display属性设置为none而已；
在开发中，当需要在现实与隐藏之间切片很频繁时，使用v-show；
当只有一次切换时，使用

注意： 复杂的条件判断一般不建议使用 v-if v-else-if v-else,而是使用computed计算属性来写。


用户登录切换案例及Vue复用问题：

**注意：**Vue在进行Dom渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素；
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了，所以会出现input框里的内容不会跟着切换的问题；
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key，
并且我们需要保证key的不同。

8.循环遍历:
v-for 遍历数组：

v-for遍历对象

v-for 绑定和非绑定key：
1.官方推荐我们在使用v-for时，给对应的元素或者组件添加上一个:key属性。
2.为什么建议加上这个属性：
这个其实和Vue的虚拟DOM的Diff算法有关系，这里我们借用React’s diff algorithm中的一张图来简单说明一下。
3.例子
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点。比如在BC之间插入一个新的F节点：
首先一开始有5个li，ABCDE。在渲染这个5个li到浏览器之前，先经过虚拟dom，在虚拟dom中创建5个li，然后再将虚拟dom中的内容 patch渲染到浏览器上。
3.1.点击按钮后，我们在BC位置处插入一个F-li（其实时数组中BC处插入一个F，li是根据数组生成的，所以虚拟dom中的li顺序：AB-F-CDE）。
此时虚拟dom中有6个li了，而且顺序就是我们生成的li的顺序AB-F-CDE。
3.2.那么重点就发生在虚拟dom => patch渲染到浏览器的步骤：
vue为了性能和复用元素的考虑，会有一个Diff算法：在将虚拟dom patch到真实dom浏览器上会做一下比较：
会把虚拟Dom里的6个li和之前渲染到浏览器的5个li作比较：ABFCDE ABCDE
A1和A2相同，直接复用。
B1和B2相同，直接复用。
F和C2不相同，不能复用：将C2更新成F
C1和D2不相同，不能复用：将D2更新成C1
D1和E2不相同，不能复用：将E2更新成D1
虚拟dom还多个E1：浏览器中再渲染一个E1插入到D1后。
3.3.所以效率很慢：
其实除了A1和B1能复用，C1，D1，E1和C2，D2，E2也是相同的可以复用的。但是默认DIFF算法，区分不出来谁是谁，谁和谁比较。
只能从头开始挨个往下比，那么只要之间有一个不一样，后面的都会不一样，不能复用了。
所以问题出现在：选择哪两方来比较。
既然默认的DIFF算法找不到哪两两比较，我们就为每个li加上一个key，那么相同的key就会进行两两比较，相同的进行复用。
一句话：key的作用主要是为了高效的进行DIFF算法，找到可以复用的元素，快速的更新虚拟DOM。
4.当我们使用key来给每个节点做一个唯一标识时：
Diff算法就可以正确识别，快速定位每个节点，找到正确的位置区域插入新的节点。
一句话：key的作用主要是为了高效的进行DIFF算法，找到可以复用的元素，快速的更新虚拟DOM。
注意： key用 item，而不用index，是因为index会随着数组的变化而变化，它不是固定不变的。

数组中哪些方法是响应式的？


补充：for循环的四种写法


补充：javascript高阶函数的使用 filter map reduce
编程范式：命令式编程、声明式编程
* 编程范式：面向对象编程：（第一公民：对象）封装、继承、多态
* 函数式编程： （第一公民：函数）
*
需求：1.取出数组中所有小于100的数字，2.将取出的数字乘以2，3.将诚意后的所有数组相加求和

三种函数合并写法：

9.过滤器
全局过滤器：
**补充：**javascript中的 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。

私有过滤器：

不同的拼接写法：

10、v-model
vue中使用v-model指令来实现表单元素和数据的双向绑定；v-model可用于 input 和 textarea元素中。
v-model其实是一个语法糖，它的背后本质上包含两个操作：
操作一：v-bind 绑定一个value属性
操作二：v-on指令给当前元素绑定input事件

v-model 的基本原理：

v-model结合radio类型：

v-model结合checkbox类型： 单选框 多选框

**注意：**只有同意协议才能点击下一步，不同意协议“下一步”按钮置灰，无法点击

v-model结合select类型: 单选 多选（multiple属性，允许下拉列表多选）

值绑定：

v-model修饰符的使用： .lazy .number .trim
.lazy 默认情况下，v-model默认是在input事件中，同步输入框的数据的；
也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变；
lazy修饰符可以让数据在失去焦点或者回车时才会更新。

.number 默认情况下，在输入框中，无论我们输入的是字母还是数字，都会被当做字符串类型进行处理；
但是，如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理；
number修饰符可以让在输入框中输入的内容自动转成数字类型。

.trim 如果输入的内容首位有很多空格，通常我们希望将其去除；
trim 修饰符可以过滤内容左右两边的空格。
11.组件化
**一、什么是组件化：**我们将一个完整的页面分成很多个组件；
每个组件都用于实现页面的一个功能块；
而每一个组件又可以进行细分。
组件化是Vue.js中的重要思想，
它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用；
任何的应用都会被抽象成一棵组件树。
有了组件化思想，我们在之后的开发中就要充分的利用它；
尽可能的将页面拆分成一个个小的、可复用的组件，
让我们的代码更加方便组织和管理，并且扩展性也更强。
二、注册组件的基本步骤：
步骤一：创建组件构造器
步骤二：注册组件
步骤三：使用组件

template 模版
component 组件
注册组件步骤解析：
（1）、Vue.extend():
*调用Vue.extend()创建的是一个组件构造器；
*通常在创建组件构造器时，传入template代表我们自定义组件的模版；
*该模版就是在使用到组件的地方，要显示的HTML代码
（2）、Vue.component():
*调用Vue.component()是将刚才的组件组件构造器注册为一个组件，并且给它起一个组件的标签名称；
*所以需要传递两个参数： 1.注册组件的标签名 2. 组件构造器
（3）、组件必须挂载在某个Vue实例下，否则它不会生效

全局组件和局部组件：
*当我们通过调用Vue.component():注册组件时，组件的注册是全局的，
这意味着该组件可以在任意Vue实例下使用；
*如果我们注册的组件是挂载在某个实例中，那么就是一个局部组件。

父组件和子组件：
可以将Vue实例看作是root组件。
注册组件语法糖写法： 省去了调用Vue.extend() 的步骤，直接使用一个对象来代替。

组件模版的抽离写法：
方法一：用script标签抽离，
注意：script标签的类型必须是 type=“text/x-template”，
通过给script标签设置id来将其和Vue.component联系起来

方法二：使用template标签抽离:
也是通过给template标签设置id来将其和Vue.component连接起来

组件中的数据存放问题？
组件是一个单独功能模块的封装，这个模块有属于自己的HTML模版，也应该有属于自己的数据data
组件对象也有一个data属性，（也可以有methods等属性）
只是这个data属性必须是一个函数，
而且，这个函数返回一个对象，对象内部保存着数据。

为什么组件中的data必须是一个函数：
每一个组件实例都需要有自己的数据保存状态；
同一个组件多次使用，不同的组件实例用的并不是同一个data对象；
函数每调用一次，都会return一个新的对象，
如果组件中的data不是一个函数，组件多次使用时相互之间会互相影响，
父子组件的通信props：
子组件是不能引用父组件或Vue实例的数据的；
但是，在开发中，我们从服务器请求到了很多的数据；
比如在一个页面中，我们从服务器请求到了很多的数据；
其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示，
这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）。
如何进行父子组件间的通信呢？
通过 props 向子组件传递数据（properties属性）
通过自定义事件向父组件发送消息
Vue实例可以看做是一个根组件（root 组件）
在真实的开发中，Vue实例和子组件的通信和父组件和子组件的通信过程是一样的 。

父传子：
props基本用法：
在组件中，使用选项props来声明需要从父级接收到的数据。
props的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称；
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

当需要对props进行类型验证时，就需要对象写法了；
验证都支持哪些数据类型呢？
String Number Boolean Array Object Date Function Symbol

**注意：**如果props里面是驼峰写法，用v-bind: 绑定的属性时，不支持驼峰写法,要用-连接，然后将大写字母变成小写；

子传父：
子组件传递数据或事件到父组件中，需要使用自定义事件来完成；
v-on 不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。
自定义事件的流程：
*在子组件中，通过 $emit() 来触发事件；
*在父组件中，通过v-on来监听事件 。

计数器案例写成子传父的形式：

父子组件的访问方式：
有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件；
**父组件访问子组件：**使用 $children 或 $refs;(reference---引用)ref如果是绑定在组件中的，那么通过this.$refs.refname 获取到的是一个组件对象；
ref 如果是绑定在普通的元素中，那么通过 this.$refs.refname获取到的是一个元素对象（跟document.querySelector拿到的元素对象一样）；this.$children是一个数组类型，它包含所有子组件对象；
**子组件访问父组件：**使用 $parents;
访问根组件 $root
组件的插槽：
组件的插槽是为了让我们封装的组件更加具有扩展性；
让使用者可以决定组件内部的一些内容到底展示什么；
例如：移动网站中的导航栏就可以封装成一个插槽；
如何封装这类组件呢？----抽取共性，保留不同：
*最好的封装方式就是，将共性抽取到组件中，将不同暴露为插槽；
*一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容；
*是搜索框，还是文字，还是菜单，由调用者自己来决定。
如何使用slot：
1.在子组件中，使用特殊的元素,就可以为子组件开启一个插槽；
2.该插槽插入什么内容，取决于父组件如何使用；
具名插槽： 当子组件的功能复杂时，子组件的插槽可能并非只有一个；这个时候就需要给插槽起一个名字；



编译作用域：
官方给出了一条准则：父组件模版的所有东西都会在父级作用域内编译；
子组件模版的所有东西都会在子级作用域内编译；
作用域插槽： 父组件替换插槽的标签，但是内容由子组件来提供； (父组件不满意子组件展示数据的方式，想要用其他方式来展示数据)
12.模块化开发：
如今，CPU、浏览器性能得到了极大的提升，很多页面逻辑迁移到了客户端（如表单验证等），随着Ajax技术得到广泛应用，jQuery等前端库层出不穷，前端代码日益膨胀，此时在JS方面就会考虑使用模块化规范去管理；将一个复杂的程序依据一定的规则（规范）封装成几个块（文件），并进行组合在一起；块的内部数据与实现是私有的，只是向外部暴露一些接口（方法），与外部其他模块通信；
常见的模块化规范：CommonJS AMD CMD ES6的Modules;
模块化有两个核心：导出 和 导入 ；
ES6模块化的导入 (import) 和导出 (export) ：
export default 某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而是让导入者可以自己来命名；
这个时候就可以使用 export default ；
注意： export default在同一个模块中，不允许同时存在多个。
import：我们使用export指令导出了模块对外提供的接口，下面我们就可以通过import命令来加载对应的这个模块了；
*首先，我们需要在HTML代码中引入js文件，并且类型需要设置为module；
import指令用于导入模块中的内容，比如main.js的代码；

Webpack详解：
*官方解释：从本质上来讲，webpack是一个现代的javascript应用的静态模块打包工具；
在ES6之前，我们要进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发；
并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包；
而webpack其中一个核心就是让我们可以进行模块化开发并且会帮助我们处理模块之间的依赖关系；
而且，不仅仅是javascript文件，我们的css、图片、json文件等等，在webpack中都可以被当做模块来使用；
**打包：**就是将webpack中的各种资源模块进行打包合并成一个或多个包（Bunde）;
并且在打包过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作；
Webpack 和 gulp/grunt 的对比：
*gulp/grunt 的核心是Task；
*我们可以配置一系列的task（任务），并且定义task要处理的任务（例如：ES6 ts转化 图片压缩 sess转成css）；
之后让gulp/grunt来依次执行这些task，而且让整个流程自动化；
所以，gulp/grunt也被称为前端自动化任务管理工具；
什么时候用gulp/grunt呢？
*如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念；
*只需要进行简单的合并，压缩，就使用gulp/grunt即可；
*但是，如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更强大的webpack了；
webpack和gulp/grunt有什么不同呢？
*gulp/grunt更加强调的是前端流程的自动化，模块化不是它的核心；
*webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他的附带功能；
webpack安装：
*安装webpack首先需要安装Node.js, Node.js自带了软件包管理工具npm;
*查看自己的node版本 node -v
* 全局安装webpack(这里先指定版本号3.6.0，因为vue cli2 依赖该版本) npm install webpack@3.6.0 -g
*局部安装： cd 对应目录 npm install webpack@3.6.0 --save-dev
webpack --save-dev` 是开发时依赖（devDependencies），项目打包后不需要继续使用的
webpack打包文件命令：将src目录下的main.js文件，打包到dist目录下，打包后的文件名为bundle.js

为什么全局安装后，还需要局部安装呢？
-在终端直接执行webpack命令，使用的全局安装的webpack；
-当在package.json中定义了script时，其中包含了webpack命令，那么使用的是局部webpack；
文件和文件夹解析：
*dist 文件夹：用于存放之后打包的文件；
*src 文件夹：用于存放我们写的源文件； src文件夹下：main.js----项目的入口文件；
*index.html：浏览器打开展示的首页html
*package.json：通过npm init 生成的，npm包管理文件；
JS文件的打包： js文件中使用了模块化的方式进行开发，它们可以直接使用吗？不可以
*因为，如果直接在index.html引入这两个js文件，浏览器并不能识别其中的模块化代码；
*另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对他们进行管理
我们应该怎么做呢？ -------使用webpack工具，对多个js文件进行打包。
webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理；
另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了；
webpack打包指令：

入口和出口： 如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？当然可以，就是创建一个webpack.config.js文件。


创建了 webpack.config.js文件后，可以直接在命令行输入 webpack 命令对文件进行打包；

package.json中定义启动：
*可以在package.json的scripts中定义自己的执行脚本；
*package.json中的scripts脚本在执行时，会按照一定的顺序寻找命令对应的位置；
*如果没有找到，回去全局的环境变量中寻找；

那么，如何执行build命令呢？

webpack中使用css文件的配置：
什么是loader？ loader是webpack中一个非常核心的概念；
webpack用来做什么呢？
*在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖；
* 但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片、也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css、将.jsx 、.vue文件转成js文件等；
*对于webpack本身的能力来说，对于这些转化是不支持的；
*那怎么办呢？给webpack扩展对应的loader就可以了；
loader使用过程： 步骤一：通过npm安装需要使用的loader；
步骤二：在webpack.config.js中的modules关键字下进行配置；
大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法;
loader用法------见官网
注意： css-loader只负责将css文件进行加载；
推荐将 style-loader 与 css-loader 一起使用；
style-loader负责将样式添加到DOM中；
注意：style-loader需要放在css-loader 的前面；因为webpack在读取使用loader的过程中，是按照从右到左的顺序读取的；

webpack-less文件的处理： 如果我们在项目中使用less sass style 来写样式，先创建一个 less sass stylus 文件，依然放在css文件夹中
document.writeln() 可以换行
document.write()
webpack-图片文件处理： 图片处理，我们使用 url-loader ；
limit 属性----当图片小于8kb时，对图片进行base64编码；
注意：
* 默认情况下，webpack会将生成的路径直接返回给使用者；但是，我们整个程序是打包在dist文件夹下的；所以这里我们需要在路径下再添加一个dist；

运行后，webpack会自动帮助我们生成一个非常长的名字，这是一个32位 hash 值，目的是防止名字重复；
但是，真实开发中，我们可能对打包的图片名字有一定的要求；
比如，将所有的图片放在一个文件夹中，跟上图片原来的名字，同时也要防止重复；
可以设置如下属性：

img-----文件要打包到的文件夹；
name----获取图片原来的名字，放在该位置；
hash:8 ---- 为了防止图片名称冲突，依然使用hash，但是我们只保留8位
ext ----- 使用图片原来的扩展名
webpack ES6语法处理 babel ：
– 如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着一些对ES6还不支持的浏览器没有办法很好的运行我们的代码；
– 如果希望将 ES6 语法转成 ES5 ，那么就需要使用 babel ；
– 而在 webpack 中，我们直接使用 babel 对应的 loader 就可以了；
– 具体用法件官网
es-2015 即 ES5;

配置webpack.config.js 文件：

webpack 使用Vue的配置过程：
第一步：通过 npm install vue --save 安装vue ；
第二步：在main.js 文件中导入vue；

第三步：在 index.html 文件中将某个div挂载到vue实例上；

打包运行时，由于vue的版本不正确，报错；解决方案如下：
Vue的两个不同版本：
runtime-only 代码中不可以有任何的 template
runtime-compiler 代码中可以有 template ，因为有 compiler 可以用于编译 template
解决方案：

创建Vue时，template 和 el 的关系：
SPA (Single Page Web Application)
.Vue文件封装处理： 安装 vue-loader 以及 vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
修改webpack.config.js的配置文件：

webpack-横幅 Plugin 的使用：
plugin 是什么？ —plugin 是插件的意思；通常是用于对某个现有的架构进行扩展；
—webpack 中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等；
loader 和 plugin 的区别： — loader 主要用于转换某些类型的模块，它是一个转换器（加载某些文件–加载器；例如加载css文件，安装一个css-loader）；
— plugin 是插件，它是对webpack本身的扩展，是一个扩展器；（扩充一些功能）
plugin的使用过程： 步骤一：通过npm 安装需要使用的 plugins （某些webpack已经内置的插件不需要安装）；
步骤二：在 webpack.config.js 中的 plugins 中配置插件；
添加版权的Plugin: — 为打包的文件添加版权申明，该插件的名字叫 BannerPlugin ,属于webpack自带的插件；

webpack-HtmlWebpackPlugin 的使用：（打包html的plugin）
目前，我们的index.html文件是存放在项目的根目录下的；
在真实发布项目时，发布的是 dist 文件夹中的内容，但是dist文件夹中如果没有index.html文件，那么打包的js等文件也就没有意义了；
所以，我们需要将index.html文件打包到 dist 文件夹中，这个时候就可以使用 HtmlWebpackPlugin 插件；
HtmlWebpackPlugin 插件可以为我们做这些事情：
— 自动生成一个 index.html 文件（可以指定模版来生成）；
— 将打包的js文件，自动通过script标签插入到body中；
安装HtmlWebpackPlugin插件：
步骤一： npm install html-webpack-plugin --save-dev
步骤二：引入HtmlWebpackPlugin 插件

步骤三：使用插件，修改webpack.config.js 文件中的plugins部分的内容，如下图：

这里的 template 表示根据什么模版来生成index.html;
另外，我们需要删除之前在output中添加的 pubicPath 属性，否则插入的script标签中的src可能会有问题；
webpack-UglifyjsWebpackPlugin的使用：（js压缩的Pligin）
— 在项目发布之前，我们必然需要对js等文件进行压缩处理；
— 这里，我们就对打包的js文件进行压缩；
— 我们使用一个第三方插件 uglifyjs-webpack-plugin,并且版本号指定1.1.1，和 CLI2保持一致；
步骤一： npm install uglifyjs-webpack-plugin@1.1.1 --save-dev；
步骤二：引用 uglifyJsPlugin 插件；
步骤三：修改 webpack.config.js 文件，使用插件：
web
webpack-dev-server 搭建本地服务器：
— webpack 提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果；
— 不过它是一个单独的模块，在webpack中使用之前需要先安装它；
npm install --save-dev webpack-dev-server@2.9.1
— devserver 也是作为webpack中的一个选项，选项本身可以设置如下属性：
* contentBase 为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写 ./dist ；
* port 端口号；
* inline 是否需要页面实时刷新；
* historyApiFallback 在SPA页面中，依赖HTML5的history模式；
**注意：**本地服务搭建好，并且配置了 --open 以后，使用 webpack-dev-server 启动服务；（如果不配置 --open
，因为上面安装 webpack-dev-server 是在本地安装，而不是全局安装，启动项目时默认先从全局找webpack-dev-server配置，没找着就会报错。）搭建本地服务器是把项目先存储在内存里，等项目都确定好后，再执行 npm run build 将项目打包，将最终的dist文件上传到服务器上。


webpack-配置文件的分离：
步骤一： 将 webpack.config.js 中的配置文件抽离成 base.config.js prod.config.js dev.config.js 三个文件；
base.config.js ---- 放公共配置 ；
prod.config.js ----放编译时需要的配置；
dev.config.js — 放开发时需要的配置
步骤二：安装webpack-merge合并工具 npm install webpack-merge --save-dev
步骤三：在 prod.config.js 和 dev.config.js 文件中，分别倒入 base.config.js 和 webpackMerge 模块；
步骤四：在 prod.config.js 和 dev.config.js 文件中，分别和 base.config.js 进行合并，并整体导出；
步骤五：配置 package.json 文件里的脚本；指定要用哪一个配置文件。
步骤六：修改打包后的项目的存放路径 ；