IT梅的前端经验分享 一个前端从业者，喜欢新技术 2020-06-03T09:13:25.799Z http://www.meixiaohan.com/ IT梅 Hexo 一文带你了解js数据储存及深复制（深拷贝）与浅复制(浅拷贝) http://www.meixiaohan.com/2020/06/03/js/deepClone/ 2020-06-02T16:00:00.000Z 2020-06-03T09:13:25.799Z 背景

在日常开发中，偶尔会遇到需要复制对象的情况，需要进行对象的复制。

由于现在流行标题党，所以，一文带你了解js数据储存及深复制（深拷贝）与浅复制(浅拷贝)

理解

首先就需要理解 js 中的数据类型了
js 数据类型包含

  1. 基础类型:String、Number、 null、undefined、Boolean以及ES6引入的Symbol、es10中的BigInt
  2. 引用类型:Object

由于 js 对变量的储存是栈内存、堆内存完成的。

  • 基础类型将数据保存在栈内存中
  • 引用类型将数据保存在堆内存中

由于 js 在数据读取和写入的时候，对基础类型是直接读写栈内存中的数据，引用类型是将一个内存地址保存在栈内存中，读写都是修改栈内存中指向堆内存的地址

以如下代码为例

1
2
3
4
5
6
7
8
9
let obj = {
  a:1,
  arr:[1,3,5,7,9],
  b:2,
  c:{
    num:100
  }
}
let num = 10

在内存中的表现为
内存中的展示

我们声明个obj1

1
2
let obj1 = obj;
console.log(obj1 == obj);//true

因为这个赋值，把内存变成了这样

赋值后

然后，内存中只是给js栈内存新增了一个指向堆内存的地址而已，这种就叫做浅复制。因为如图可以看到，如果我们修改obj.a的话，实际修改的是堆内存0x88888888中的变量a，由于obj1也指向这个地址，所以obj1.a也被修改了

深复制是指，不单单复制引用地址，连堆内存都复制一遍，使obj和obj1不指向同一个地址。

代码

分开来看深复制与浅复制

浅复制

由上述图可知，浅复制只是复制第一层，也就是，基本类型复制新值，引用类型复制引用地址

浅复制可以使用的方案有循环赋值、扩展运算符、object.assign(),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
let obj = {
  a:1,
  arr:[1,3,5,7,9],
  b:2,
  c:{
    num:100
  }
}
function clone1(obj){ // 使用循环赋值
  let b = {};
  for(let key in obj){
    b[key] = obj[key]
  }
  return b
}
function clone2(obj){ // 使用扩展运算符
  let b = {
    ...obj
  };
  return b
}
function clone3(obj){ // 使用object.assign()
  let b = {};
  Object.assign(b,obj)
  return b
}
let obj1 = clone1(obj);
let obj2 = clone2(obj);
let obj3 = clone3(obj);

console.log(obj1 === obj); //false 代表复制成功了
console.log(obj2 === obj); //false 代表复制成功了
console.log(obj3 === obj); //false 代表复制成功了
console.log('obj0.c.num修改前',obj.c.num); //100
console.log('obj1.c.num修改前',obj1.c.num); //100
console.log('obj2.c.num修改前',obj2.c.num); //100
console.log('obj3.c.num修改前',obj3.c.num); //100
obj0.c.num = 555;
console.log('obj0.c.num修改后',obj.c.num); //555
console.log('obj1.c.num修改后',obj1.c.num); //555
console.log('obj2.c.num修改后',obj2.c.num); //555
console.log('obj3.c.num修改后',obj3.c.num); //555

由于是浅复制，所以引用类型只是复制了内存地址，修改其中一个对象的子属性后，引用这个地址的值都会被修改。

浅克隆图解如下
浅克隆图解

深复制

由于浅复制只是复制第一层，为了解决引用类型的复制，需要使用深复制来完成对象的复制，基本类型复制新值，引用类型开辟新的堆内存。

深复制可以使用的方案有JSON.parse(JSON.stringify(obj))、循环赋值。

JSON.parse(JSON.stringify(obj))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let obj = {
  a:1,
  arr:[1,3,5,7,9],
  c:{
    num:100
  },
  fn:function(){
     console.log(1)
  },
  date:new Date(),
  reg:/\.*/g
}
function clone1(obj){ // 使用JSON.parse(JSON.stringify(obj))
  return JSON.parse(JSON.stringify(obj))
}
let obj1 = clone1(obj);
console.log(obj === obj1); //false 代表复制成功了
obj.c.num = 555;

console.log(obj.c.num,obj1.c.num) // 555,100

看起来是复制成功了！！~地址也变了，修改obj,obj1的引用地址不会跟着变化。

但是我们来console一下obj以及obj1

1
2
console.log(obj)
console.log(obj1)

打印结果

似乎发现了离奇的事情，只有obj.a以及obj.c正确的复制了，日期类型、方法、正则表达式均没有复制成功，发生了一些奇怪的事情

循环赋值 deepClone

那么为了解决这种事情，就需要写一个deepClone方法来完成深复制了，参考了许多开源库的写法，将所有的复制项单独拆出，方便未来对特殊类型进行扩展，也防止不同功能间的变量互相干扰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 //既然是深复制，一定要传入一个object，再return 一个新的 Object
function deepClone(obj){
    let newObj;
    if(obj instanceof Array){ // 数组的话，要new一个数组
      newObj = []
    }else if(obj instanceof Object){  // 对象的话，要new一个对象
      newObj = {}
    }
    if(obj === null) {
      return cloneNull(obj)
    }
    if(typeof obj=='function'){
        return cloneFunction(obj)
    }
    if(typeof obj!='object') {
        return cloneOther(obj)
    }
    if(obj instanceof RegExp) {
        return cloneRegExp(obj)
    }
    if(obj instanceof Date){
        return cloneDate(obj)
    }
    if(obj instanceof Array){
        for(let index in obj){
            newObj[index] = deepClone(obj[index]); // 对数组子项进行复制
        }
    }
    if(obj instanceof Object){
        for(let key in obj){
            newObj[key] = deepClone(obj[key]); // 对对象子项进行复制
        }
    }
    return newObj;
}
function cloneNull(obj){ // 复制NULL
  return obj
}
function cloneFunction(obj){ // 复制方法，
  //这个方法待完善，暂时未找到能够完美复制function的方案，如果有方案，望指出
  return obj
}
function cloneOther(obj){ // 复制非对象的数据
  return obj
}
function cloneRegExp(obj){ // 复制正则对象
  return new RegExp(obj)
}
function cloneDate(obj){ // 复制日期对象
  return new Date(obj)
}

这样一个基本上满足功能的深复制就完成了。先测试一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let obj = {
  a:1,
  arr:[1,3,5,7,9],
  c:{
    num:100
  },
  fn:function(){
     console.log(1)
  },
  date:new Date(),
  reg:/\.*/g
}

let obj1 = deepClone(obj);
console.log(obj.c === obj1.c); // false  代表复制成功
console.log(obj.fn === obj1.fn);// true   由于方法单纯修改了引用的地址，所以这里是浅复制
console.log(obj.date === obj1.date);// false  代表复制成功
console.log(obj.reg === obj1.reg);// false  代表复制成功

再console一下

1
2
console.log(obj)
console.log(obj1)

打印结果

这样，就完成了deepClone深复制方法

经过深复制后，图解如下
深复制后内存图解

优化 deepClone

上述代码还有优化空间，参考了lodash库，在进行 new 对象时，可以使用 constructor构造函数 来进行创建新的实例，这样

  1. 可以不用判断递归中，是数组还是对象
  2. 如果深复制的某一项是某个原型的实例，深复制完成后，依然是该原型的实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function deepClone(obj){
    let newObj = new obj.constructor;
    if(obj === null) {
      return cloneNull(obj)
    }
    if(typeof obj=='function'){
        return cloneFunction(obj)
    }
    if(typeof obj!='object') {
        return cloneOther(obj)
    }
    if(obj instanceof RegExp) {
        return cloneRegExp(obj)
    }
    if(obj instanceof Date){
        return cloneDate(obj)
    }
    if(obj instanceof Array){
        for(let index in obj){
            newObj[index] = deepClone(obj[index]); // 对数组子项进行复制
        }
    }
    if(obj instanceof Object){
        for(let key in obj){
            newObj[key] = deepClone(obj[key]); // 对对象子项进行复制
        }
    }
    return newObj;
}
function cloneNull(obj){ // 复制NULL
  return obj
}
function cloneFunction(obj){ // 复制方法，
  //这个方法待完善，暂时未找到能够完美复制function的方案，如果有方案，望指出
  return obj
}
function cloneOther(obj){ // 复制非对象的数据
  return obj
}
function cloneRegExp(obj){ // 复制正则对象
  return new RegExp(obj)
}
function cloneDate(obj){ // 复制日期对象
  return new Date(obj)
}

最终版本 deepClone

然后可以有一个合并版本的，比较节省代码，将下方区分开的复制方法，合并到deepClone中，可以极大地减少代码体积

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function deepClone(obj){ //
    let newObj = new obj.constructor;
    if(obj === null) return obj
//  if(typeof obj=='function') return obj
//  由于typeof obj=='function'也符合下方的typeof obj!='object'，所以此条可以省略
    if(typeof obj!='object') return obj
    if(obj instanceof RegExp) return new RegExp(obj)
    if(obj instanceof Date) return new Date(obj)
    // 运行到这里，基本上只存在数组和对象两种类型了
    for(let index in obj){
        newObj[index] = deepClone(obj[index]); // 对子项进行递归复制
    }
    return newObj;
}
]]> <h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>在日常开发中，偶尔会遇到需要复制对象的情况，需要进行对象的复制。</p> <p>由于现在流行标题党，所以，一文带你了解js数据储存及深复制（ 撸一个简单的vue-router来剖析原理 http://www.meixiaohan.com/2020/03/10/Vue/vue-router-yuanli/ 2020-03-09T16:00:00.000Z 2020-03-09T08:50:49.360Z 理解

随着前端业务的发展，
我们一般在写一个较为大型的vue项目时候，会使用到vue-router，来根据指定的url或者hash来进行内容的分发，可以达到不像服务端发送请求，就完成页面内容的切换，能够减少像服务器发送的请求，让用户进行页面跳转时候能够更快，体验更好

疑问

在初学vue-router的时候，一般人都会有一个印象，router-link以及router-view都是vue原生自带的标签。但是这个印象是错误的，vue-router本质上是一个vue的插件，通过Vue.use(VueRouter)来使用这个插件。router-link以及router-view也是这个插件实现的自定义标签。

本文以开发插件的模式，撸一个vue-router插件以加深对其原理的了解

url变化流程图解

router流程图

也就是说，要实现一个简单的vue-router，需要完成以下需求

具体操作

创建vue项目

1
vue create my-vue-router

由于只着重于vue-router的内容，所以先使用原本的vue-router这样只替换vue-router源码文件即可

增加vue-router

1
vue add router

然后项目目录就变成了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
my-vue-router
  |- node_modules
  |- public
  |- src
      |- assets
      |- components
          |- HellowWorld.vue
      |- router
          |- index.js
      |- views
          |- About.vue
          |- Home.vue
      |- App.vue
      |- main.js
  |- .gitinore
  |- babel.config.js
  |- package.json
  |- README.md
  |- yarn.lock

在目录中，新建一个myRouter.js的文件，来放置我们的源码

新建自己的myRouter文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
my-vue-router
      |- node_modules
      |- public
      |- src
          |- assets
          |- components
              |- HellowWorld.vue
          |- router
              |- index.js
+             |- myRouter.js            
          |- views
              |- About.vue
              |- Home.vue
          |- App.vue
          |- main.js
      |- .gitinore
      |- babel.config.js
      |- package.json
      |- README.md
      |- yarn.lock

切换引入文件为自己写的myRouter.js

此时，@/src/router/index.js中的内容里，我们将导入的vue-router替换为我们的myRouter.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  import Vue from 'vue'
- import VueRouter from 'vue-router'
+ import VueRouter from './myRouter'
  import Home from '../views/Home.vue'

  Vue.use(VueRouter)

  const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  ]

  const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })

  export default router

这里我们可以看到，代码执行的流程为
引入myRouter.js->配置routes对象->new VueRouter->export default导出

此处用到了 Vue.use()这个API

Vue.use()

vue中的插件，一个核心的api就是vue.use()

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为install 方法。install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。

也就是说，我们在自己造的myRouter里得实现这个install方法

需求

  1. 提供一个构造类，能够使用new VueRouter来生成实例
  2. 实现install方法
  3. 监听url变化，并双向绑定current方法
  4. 注册自定义组件router-link与router-view
  5. 实现用户配置的路由数组到map的转换,方便快速的查询到路由匹配的对象

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
let Vue;//由于使用者肯定是使用vue.use引入的这个插件，所以代码里就不引入vue.js了，防止重复打包
// 需求1 声明一个拥有constructor构造器的class
class VueRouter{
    constructor(options={}){// 构造函数
        this.$options=options;// 保存配置项
        this.app = { // 声明一个拥有current的变量，已完成路由的双向绑定
            current:"/"
        }
        Vue.util.defineReactive(this.app,'current',this.app.current);//vue的拦截方法，会该值增加get拦截以收集依赖，set拦截以触发双向绑定
        this.routerMap={}; // 创建key-value模式的routerMap，便于使用key能够快速的找到即将render(渲染)的组件
        this.init(options); // 执行init方法，以完成需求3,4,5
    }
    init(options={}){
        this.bindBrowserEvents()// 绑定浏览器事件
        this.initComponent()//注册router-view及router-link组件
        this.createRouterMap(options.routes)//创建key-value模式的routerMap
    }
    createRouterMap(arr=[]){ // 创建routerMap
        arr.forEach(item => {
            this.routerMap[item.path]=item
        });
        //  处理完后routerMap格式如下
        //  this.routerMap = {
        //    '/':{
        //      path: '/',
        //      name: 'Home',
        //      component: Home
        //    },
        //    '/about':{
        //      path: '/about',
        //      name: 'About',
        //      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
        //    }
        //  }
    }
    bindBrowserEvents(){ // hash模式监听 hashchange 方法
        window.addEventListener('load',this.onHashChange.bind(this))
        window.addEventListener('hashchange',this.onHashChange.bind(this))
    }
    initComponent(){ // 注册自定义组件RouterLink及RouterView
        Vue.component('RouterLink',{
            props: {
                to: String
            },
            render(h) {
                return h('a',{
                    attrs:{
                        href:'#'+this.to
                    }
                },this.$slots.default)
            },
        })
        Vue.component('RouterView',{
            render:(h)=>{
                const component = this.routerMap[this.app.current].component
                return h(component)
            },
        })
    }
    onHashChange(){ // hash变化时，改变 this.app.current 
        window.location.hash = window.location.hash || '/'; // 如果hash没有值，则默认给补一个/#/
        if(this.routerMap[window.location.hash.slice(1)]){ // this.app.current = hash值
            this.app.current = window.location.hash.slice(1);
        }else{
            this.app.current = '/';
        }

        // 此处执行完后，则由于双向绑定，会触发routerView进行重新渲染
    }
}

// 需求2 实现install方法
VueRouter.install = function(_Vue){
  Vue = _Vue; // 因为一定会先走install，所以将这个传入的Vue实例，保存到变量Vue中
}

注释都写在代码里啦，可以执行简单的路由双向绑定功能，有哪里有疑问可以提出~互相学习~

觉得好的话，可以给我的 github点个star哦

]]> <h1 id="理解"><a href="#理解" class="headerlink" title="理解"></a>理解</h1><p>随着前端业务的发展，<br>我们一般在写一个较为大型的<code>vue</code>项目时候，会使用到<code>vue-router</ vue-组件化-插槽(slot) http://www.meixiaohan.com/2020/03/03/Vue/vue-component-slot/ 2020-03-02T16:00:00.000Z 2020-03-03T11:42:37.364Z 理解

Vue组件化中，当我们在设计一个组件的时候，可能会保留一部分，让使用者自定义的内容，比如：

  1. 导航栏组件中，右上角的分享按钮，左上角做菜单按钮
  2. 弹出框组件中，弹出框的提示内容等
  3. …

在这种场景下，把保留给使用者的部分，叫做插槽(slot)

插槽分类

匿名插槽

理解：

  1. 所谓匿名插槽，就是这个插槽里，没有声明任何名称，使用者放进来的东西，都扔进这个插槽中。
  2. 匿名插槽是一种特殊的具名插槽，也就是名为default的插槽

写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
//自定义组件中
<template>
    <div>
        <slot><slot>//匿名插槽
    </div>
</template>

//页面(使用者)使用
<template>
    <div>
        <myComponent><p>我被放进了插槽中</p></myComponent>
    </div>
</template>

代码中我被放进了插槽中这句话，就进入了自定义组件的匿名插槽中，从而变成了

1
2
3
4
5
6
7
8
//自定义组件中
<template>
    <div>
        <div>
            <p>我被放进了插槽中</p><!-- 匿名插槽中放入了内容 -->
        </div>
    </div>
</template>

具名插槽

理解：所谓具名插槽，就是这个插槽里，这个插槽被命了名，使用者放进来的东西，声明了插槽的名称，会被分发进这个具名插槽中。
写法：使用template标签声明具名插槽名称<template v-slot:插槽名></template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//自定义组件中
<template>
    <div>
        <div class='slot1'>
            <slot name='slot1'><slot><!-- 名为“slot1”的具名插槽 -->
        </div>
        <div class='slot2'>
            <slot name='slot2'><slot><!-- 名为“slot2”的具名插槽 -->
        </div>
        <slot><slot>//这里是个匿名插槽
    </div>
</template>

//页面(使用者)使用
<template>
    <div>
        <myComponent>
            <template v-slot:slot1>
                <p>名为slot1的具名插槽中</p>
            </template>
            <a>啦啦啦啦德玛西亚</a>
            <template v-slot:slot2>
                <p>名为slot2的具名插槽中</p>
            </template>
            <p>啦啦啦啦德玛西亚</p>
        </myComponent>
    </div>
</template>

代码被分发到对应插槽后的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//自定义组件中
<template>
    <div>
        <div class='slot1'>
            <div>
                <p>名为slot1的具名插槽中</p>
            </div>
        </div>
        <div class='slot2'>
            <div>
                <p>名为slot2的具名插槽中</p>
            </div>
        </div>
        <div>
            <a>啦啦啦啦德玛西亚</a>
            <p>啦啦啦啦德玛西亚</p>
        </div>
    </div>
</template>

作用域插槽

理解：一种能够将子组件可用的内容暴露给父组件的插槽。
比如：我们有的时候，需要一些子组件里的东西，做内容拼接，就像一个用户名输入框，我们希望所有的用户名，都跟随一个user_的前缀，此处就可以使用到作用域插槽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//自定义组件中
<template>
    <div>
        <slot :user='username'><slot>//匿名插槽
    </div>
</template>
<script>
    export default {
        data(){
            return {
                username:{
                    prefix:"user_"
                }
            }
        }
    }
</script>

//页面(使用者)使用
<template>
    <div>
        <myComponent v-slot='obj'>
            {{obj.user.prefix}}小寒大人
        </myComponent>
    </div>
</template>

编译后的结果就变成了

1
2
3
4
5
6
7
<template>
    <div>
        <div>
            user_小寒大人
        </div>
    </div>
</template>

默认值(后备内容)

理解

插槽是拥有默认值功能的，如果对应的slot没有传入内容，则会使用slot的默认值

写法

以匿名参数为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//自定义组件中
<template>
    <div>
        <slot><p>这里是默认的内容</p></slot>
    </div>
</template>

//页面(使用者)使用
<template>
    <div>
        <myComponent></myComponent>
        <myComponent>替换了</myComponent>
    </div>
</template>

最终表现结果为

1
2
3
4
5
6
7
8
9
10
<template>
    <div>
        <div>
            <p>这里是默认的内容</p>
        </div>  
        <div>
            替换了
        </div>
    </div>
</template>

动态插槽名

理解

可以使用动态值来定某些内容进入某些具名插槽中

写法

正常的具名插槽为v-slot:插槽名，动态的写法为v-slot:[dynamicSlotName]，此写法仅在vue2.6.0后的vue中版本使用

简写插槽名

正常的具名插槽为v-slot:插槽名，简写的写法为#插槽名，此写法仅在vue2.6.0后vue中版本使用

]]> <h1 id="理解"><a href="#理解" class="headerlink" title="理解"></a>理解</h1><p>Vue组件化中，当我们在设计一个组件的时候，可能会保留一部分，让使用者自定义的内容，比如：</p> <ol> <li>导航栏组件中，右上角的 从0开始探究vue-组件化-组件之间传值 http://www.meixiaohan.com/2020/02/28/Vue/vue-component/ 2020-02-27T16:00:00.000Z 2020-03-04T14:19:10.978Z 理解

Vue中有个非常重要的核心思想，就是组件化，组件化是为了代码复用

什么是组件化

组件化，就像一个电脑主机里的主板，有内存条的插口，有硬盘，光驱等等的插口，我们的项目，就像一个电脑主机，通过各种组件化的模块（硬盘、内存等），来拼合成一个完整的电脑。
vue组件化

（图片来源 vue-组件化应用构建）

如图，每一个块都是一个组件，由许许多多的组件拼合而成，可以无限的嵌套下去

组件化的好处

  1. 模块复用，提高效率，让重复的代码只写一遍。
  2. 预留个性化设置，可以保证模块，既通用，又可变。
  3. 提高可维护性，如果一个项目多个页面使用了同一个组件（例如消息弹框），如果修改弹框样式，只需要修改这个模块即可。

写法

cli模式

组件部分

1
2
3
4
5
6
7
8
<template>
  <div></div>
</template>
<script>
export default {
    name:"myAlert"
};
<style></style>

使用者部分

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>
    <myAlert></myAlert> <!-- 实例中使用组件 -->
  </div>
</template>

<script>
import myAlert from '@/components/alert.vue';//导入自己写的组件
export default {
  components:{myAlert}//在这个vue实例中注册组件
};
</script>
<style></style>

引入vue.js模式

1
2
3
4
5
6
// 定义名为 todo-item 的新组件
Vue.component('myAlert', {
  template: '<div>这是一个弹框</div>'
})

var app = new Vue(...)

html部分使用

1
2
3
<div>
    <myAlert></myAlert>
</div>

组件传值

Vue中存在的组件之间传值的方案如下

父=>子

props

子组件中声明props,父组件往对应的props值中传递

$refs

父组件使用this.$refs.组件名.变量来选中子组件并修改子组件的内容

$children

父组件使用this.$children[0].变量来选中并修改子组件的内容

需要注意的是：由官网vm.$children得知

$children 并不保证顺序，也不是响应式的

所以一般不建议使用此方法来进行传值，因为不能很稳定的找到指定组件的实例，除非这个页面只有一个子组件

另外，此例中，this.$children[0]不是响应式的this.$children[0].变量是响应式的。

子=>父

$emit

此处为观察者模式

  1. 子组件调用this.$emit('confirm','点击了确定')来派发confirm事件
  2. 父组件中<myAlert @confirm='successCallback'></myAlert>来监听事件;
    注意：此处为，谁派发就是谁监听，也就是说，confirm事件的派发者和监听者，都是myAlert组件，myAlert组件监听完毕后将调用父组件的successCallback回调事件，当然这个监听的事件名和触发的事件名都是可以自定义的。

兄弟组件之间互相传值

使用公共节点搭桥

  1. 使用公共父级组件$parents或者$root

    1
    2
    3
    4
    5
    6
    //组件一
    this.$parents.$on('foo',(e)=>{
        console.log(e);//此处e为$emit时传入的值
    })
    //组件二
    this.$parents.$emit('foo','bar');//控制台输出bar

  2. 使用任意两个组件之间传值的方案 点击查看

跨辈分传值

概念，所谓跨辈分传值，就是

祖辈->父辈->子辈->孙辈->…
其中，垮了一个辈分或多个辈分的就是跨辈分传值，例如，祖辈及孙辈

provide/inject

由于多级嵌套，使用props传递显然是不现实的

针对这种情况，vue提供了 provide/inject两个API来完成这件事

  1. 祖辈使用provide声明一个变量
  2. 孙辈使用inject来注入祖辈声明的变量

写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//祖辈
export default {
    provide(){//此处可以传入动态变量，与data类似
        return {
            componentYeye:this
        }
    },
    data(){
        return {
            yeyedeBianliang:'爷爷的变量'
        }
    }
}
//孙辈
export default {
    inject:['componentYeye'],//此处为数组，注入祖辈声明的变量
    mounted(){
        console.log(this.componentYeye.yeyedeBianliang);//爷爷的变量
    }
}

注意

  1. 此方法多用来制作组件库时使用。
  2. 此方法不建议直接在孙辈修改祖辈的数据。因为这些数据可能在多个子组件中使用，如果要修改，应该调用祖辈组件变量的方法来修改，与vuex中建议变量修改都是用commit类似

使用任意两个组件之间传值的方案 点击查看

任意两个组件之间传值

原型挂载

所谓原型挂载，就是在main.js中将公共变量，事件，都挂在到Vue原型上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//main.js
Vue.prototype.$globalData = {}
Vue.prototype.$sayName = function(e){
    console.log('我的名字是',e)
}
new Vue({...})

//组件一
Vue.prototype.$globalData.name='小明';
this.$sayName('小王');//我的名字是小王

//组件二
console.log(this.$sayName.name);//小明
this.$sayName('小王');//我的名字是小王

事件总线

所谓事件总线，就是在当前的Vue实例之外，再创建一个Vue实例来专门进行变量传递，事件处理，管理回调事件等

1
2
3
4
5
6
7
8
9
10
//main.js中
Vue.prototype.$bus = new Vue();
new Vue({...})

//组件一
this.$bus.$on('sayName',(e)=>{
    console.log('我的名字是',e)
})
//组件二
this.$bus.$emit('sayName','小明');//我的名字是 小明

vuex

Vuex是Vue提供的一种，专门用来管理vue中的公共状态，事件等等。详见 从0开始探究vue-公共变量的管理

]]> <h1 id="理解"><a href="#理解" class="headerlink" title="理解"></a>理解</h1><p>Vue中有个非常重要的核心思想，就是组件化，组件化是为了代码复用</p> <h1 id="什么是组件化"><a href="#什么是组件化" 从0开始探究vue-公共变量的管理 http://www.meixiaohan.com/2020/02/26/Vue/vuex/ 2020-02-25T16:00:00.000Z 2020-03-01T07:09:06.555Z 背景

在Vue项目中，我们总会遇到一些公共数据的处理，如方法拦截，全局变量等，本文旨在解决这些问题

解决方案

事件总线

所谓事件总线，就是在当前的Vue实例之外，再创建一个Vue实例来专门进行变量传递，事件处理，管理回调事件等

1
2
3
4
5
6
7
8
9
10
11
//main.js中
Vue.prototype.$bus = new Vue();
new Vue({...})

//页面一
this.$bus.$on('sayName',(e)=>{
    alert('我的名字是',e)
})

//页面二
this.$bus.$emit('sayName','小明');//我的名字是 小明

原型挂载

所谓原型挂载，就是在main.js中将公共变量，事件，都挂在到Vue原型上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//main.js
Vue.prototype.$globalData = {}
Vue.prototype.$sayName = function(e){
    console.log('我的名字是',e)
}
new Vue({...})

//组件一
Vue.prototype.$globalData.name='小明';
this.$sayName('小王');//我的名字是小王

//组件二
console.log(this.$sayName.name);//小明
this.$sayName('小王');//我的名字是小王

vuex

Vuex是Vue提供的一种，专门用来管理vue中的公共状态，事件等等，以应用登录为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//新建store.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {//此处为公共变量
    userId:"",//用户Id
    loginSession:""//用户登录凭证
  },
  mutations: {//此处为同步方法
    setLoginSession(state,loginSession){//存入state中的用户凭证
        state.loginSession = loginSession;
    },
    setUserId(state,loginSession){//存入state中的用户凭证
        state.loginSession = 'user_'+Math.floor(Math.random()*100000000000);
    }
  },
  actions: {//此处为异步方法
    getUserId({state,commit},options={}){//从服务器取登录凭证，然后返回是否登录状态
        return new Proise((resolve)=>{//返回一个promise对象，来让调用者可以使用.then来进行下一步操作
            axios.get('api').then((res)=>{
                commit('setLoginSession',res.data.loginSession)
                resolve(this.getters.isLogin)
            })
        }))
    }
  },
  modules: {//此处为混入更多的vuex小模块
    
  },
  gatters: {//此处为计算变量
      isLogin(){
          return (this.userId&&this.loginSession)?true:false
      }
  }
})
//main.js中注入vuex
import store from './store/store.js'
Vue.prototype.$store = store;

//app.vue中
export default {
    data(){
        return {}
    },
    mounted(){
        this.$store.commit('setUserId');//设置用户Id
        this.$store.dispatch('getUserId').then((result)=>{//查询登录凭证，并返回登录结果
            console.log(this.$store.getters.isLogin,result);//true  true  此处也可以查看计算属性中的是否登录状态
            if(result){
                alert('登录了')
            }else{
                alert('未登录')
            }
        });
    }
}
]]> <h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>在<code>Vue</code>项目中，我们总会遇到一些公共数据的处理，如方法拦截，全局变量等，本文旨在解决这些问题</p> <h1 id 从0开始探究vue-双向绑定原理 http://www.meixiaohan.com/2020/02/20/Vue/vue-mvvm-yuanli/ 2020-02-19T16:00:00.000Z 2020-02-28T02:18:26.437Z 理解

vue是一个非常优秀的框架，其优秀的双向绑定原理，mvvm模型，组件，路由解析器等，非常的灵活方便，也使开发者能够着重于数据处理，让开发者更清晰的设计自己的业务。

双向绑定，就是数据变化的时候，自动触发视图的变化。

实践

我们都理解，vue2.0中，双向绑定的核心为Object.defineProperty(obj, prop, descriptor),方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象

参数obj为要在其上定义属性的对象。
参数prop为要定义或修改的属性的名称。
参数descriptor为将被定义或修改的属性描述符。

返回被传递给函数的对象。

尝试Object.defineProperty拦截用户对变量的设置

我们可以新建一个项目，用来模拟及学习vue双向绑定的相关内容

1
2
3
4
5
+   vue相关
+       |- 双向绑定原理
+           |- js
+               |- myVue.js
+           |- index.html

修改index.html中的内容，引入自己创建的myVue.js。

1
2
3
4
5
6
7
8
9
10
11
12
+   <!DOCTYPE html>
+   <html lang="en">
+   <head>
+       <meta charset="UTF-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+       <title>Document</title>
+   </head>
+   <body>
+
+      <script src="./js/myVue.js"></script>
+   </body>
+   </html>

编辑myVue.js的内容，来尝试一下Object.defineProperty(obj, prop, descriptor)这个API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
+   var data = {
+       a: 1
+   }
+   Object.defineProperty(data, 'a', {// 为data中的a进行拦截，读取a的时候返回自己新建的_a的值，设置a的值的时候，设置到_a上。这样，开发者对a的操作，都会映射到我们新建的虚拟的_a变量上
+       configurable: true, //  是否允许删除属性，默认true
+       enumerable: true, //  是否允许遍历，默认true
+       get: function () {
+           console.log('我被读取了，返回了_a的值', this._a)
+           return this._a
+       },
+       set(value) {
+           // this.a = value;
+           this._a = value;
+           console.log('我被设置了，被设置的值为', this._a, '并放进了a的对象中')
+       }
+   })

在浏览器中，打开页面，并查看控制台，对data.a进行操作

1
2
3
4
5
6
7
8
9
10
11
data.a                                                              myVue.js:8 
我被读取了，返回了_a的值 undefined
undefined
——————————————————————————————————————————————————————————————————————————————
data.a = 10                                                         myVue.js:14 
我被设置了，被设置的值为 10 并放进了a的对象中
10
——————————————————————————————————————————————————————————————————————————————
data.a                                                              myVue.js:8
我被读取了，返回了_a的值 10
10

可以看到，我们对data.a进行的操作，实际改变的变量是我们已经拦截的_a变量。
目前出现的问题是，第一次读取的时候，这个值没有被设置上，在下面来模拟解决方案

私有变量

声明概念_开头的变量一版为私有变量，外部无法访问，但是我们现在在控制台中输入并修改私有变量data._a

1
2
3
4
5
6
7
8
9
10
11
12
data._a
10
——————————————————————————————————————————————————————————————————————————————
data._a = 20
20
——————————————————————————————————————————————————————————————————————————————
data._a
20
——————————————————————————————————————————————————————————————————————————————
data.a                                                              myVue.js:8 
我被读取了，返回了_a的值 20
20

却可以拿到私有变量中的_a的值，也可以进行无拦截的修改，这显然是我们所不希望的

所以我们可以为Object.defineProperty(obj, prop, descriptor)来进行封装一次，把我们理解的_a变成一个私有变量
修改myVue.js的内容为如下内容，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var data = {
    a: 1
}
myDefineProperty(data, 'a')

function myDefineProperty(obj,key){//对Object.defineProperty进行一次拦截，使外界无法访问私有变量value
    var value = obj[key];
    Object.defineProperty(obj,key,{// 为data增加
        configurable: true, //  是否允许删除属性，默认true
        enumerable: true, //  是否允许遍历，默认true
        get: function () {
            console.log('我被读取了，返回了value的值', value)
            return value
        },
        set(newValue) {
            value = newValue;
            console.log('我被设置了，被设置的值为', newValue, '并放进了value的对象中')
        }
    })
}

然后再查看控制台

1
2
3
4
5
6
7
8
9
10
data._a
undefined
——————————————————————————————————————————————————————————————————————————————
data.value
undefined
——————————————————————————————————————————————————————————————————————————————
data.a                                                             myVue.js:12
我被读取了，返回了value的值 1
1
——————————————————————————————————————————————————————————————————————————————

开发者就无法自行操作我们设计的私有变量value的内容了

自此，我们解决了，对一个对象属性的拦截，并且阻止了用户对我们设计的私有变量进行操作

双向绑定实践

我们知道了拦截属性之后，那么就进一步来实现，一个简单的双向绑定

我们修改一下index.html中的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
+       <input type="text" @change='changeIpt'>
+       <p id='changeValue'></p>
    </head>
    <body>
        
        <script src="./js/myVue.js"></script>
    </body>
    </html>

并在myVue.js中，在set中添加双向绑定的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    var data = {
        a: 1
    }
    myDefineProperty(data, 'a')


+   var ipt = document.getElementById('ipt');
+   ipt.oninput =  function(e){
+       data.a = e.target.value
+   }

    function myDefineProperty(obj,key){
        var value = obj[key];
        Object.defineProperty(obj,key,{// 为data增加
            configurable: true, //  是否允许删除属性，默认true
            enumerable: true, //  是否允许遍历，默认true
            get: function () {
                console.log('我被读取了，返回了value的值', value)
                return value
            },
            set(newValue) {
                value = newValue;
+               document.getElementById('iptValue').innerText = newValue;
+               ipt.value = newValue;
                console.log('我被设置了，被设置的值为', newValue, '并放进了value的对象中')
            }
        })
    }

然后我们在input框里输入内容，便表现出了双向绑定的能力。

点击查看demo

记得打开控制台哦！~下方为录制的屏幕，可能无法正常显示，可以点击上方demo来查看

觉得好的话，可以给我的 github点个star哦

]]> <h1 id="理解"><a href="#理解" class="headerlink" title="理解"></a>理解</h1><p>vue是一个非常优秀的框架，其优秀的双向绑定原理，mvvm模型，组件，路由解析器等，非常的灵活方便，也使开发者能够着重于数据处理，让开发者更 javascript-请求封装 http://www.meixiaohan.com/2019/09/14/request_fengzhaung/ 2019-09-13T16:00:00.000Z 2020-02-17T01:13:18.101Z 背景

很多人在写前端代码的时候，都不做请求封装，这样容易出现的情况是，假设在一个项目中，有100个页面，每个页面都需要向服务器发送请求，来完成数据的交互，突然有一天，产品的哥们说，咱们得加个请求的验证，给请求交互的data里，加一个加密的数据，来保证数据的安全性，如果未进行封装的话，这100个页面中，每个请求都需要改一次，这就是个很庞大的工程，所以，我们在开始写代码的时候，对请求的封装，是一个很重要的设计

理解

所谓

操作

我们以Vue项目为例，使用vue-cli搭建项目，使axios来发送请求

文件结构如下

1
2
3
4
5
6
7
8
9
10
11
12
my-projext
    |-node_modules
    |-public
    |-src
        |-assets
        |-components
        |-router
        |-store
        |-views
        |-App.vue
        |-main.js
    |-package.json

方法一：使用单独的文件来进行封装

首先，在src下新建一个文件夹api并新建一个api.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
my-projext
    |-node_modules
    |-public
    |-src
+       |-api
+           |-api.js
        |-assets
        |-components
        |-router
        |-store
        |-views
        |-App.vue
        |-main.js
    |-package.json

api.js添加如下内容

1
2
3
4
5
6
7
8
9
10
const apiUrl = 'https://www.yoursite.com/api/';
const axios = require('axios');

export function request(options = {}) {
    axios[options.methods](
        apiUrl+options.url, 
        options.data
    ).then(options.success)
    .catch(options.fail)
}

经过这样的封装后，在页面中使用，就变成了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
page中

import {request} from '@/api/api.js';
export default {
    data(){
        return {}
    },
    methdos:{
        getData(){
            request({
                url:"getData",
                data:{
                    param_1:'入参数据'
                },
                success:(res)=>{
                    console.log('成功回调')
                }
            })
        }
    }
}

也可以在main.js中进行统一引入，然后注入到Vue.prototype中，这样就不用单独页面进行单独引入了

1
2
3
4
5
6
7
8
9
//main.js
import {request} from '@/api/api.js';
Vue.prototype.$request = request;


//Page中使用
this.$request({
    url:'xxxxxx'
})

这样的话，如果想在请求前增加请求拦截,只需要在公共方法中，增加一个拦截即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    const apiUrl = 'https://www.yoursite.com/api/';
    const axios = require('axios');
+   const userData = require('@/api/userData.js');//引入放置用户信息的公共文件

    export function request(options = {}) {
+       options=beforeRequest(options)
        axios[options.methods](
            apiUrl+options.url, 
            options.data
-       ).then(options.success)
+       ).then((res)=>{
+           res=beforeResponse(res)
+           options.success&&options.success(res)
+       })
        .catch(options.fail)
    }

+   export function beforeRequest(options = {}) {//请求前拦截的地方
+       options.header = options.header||{}
+       options.header.token = userData.token;
+       return options
+   }

+   export function beforeResponse(res = {}) {//收到相应后拦截的地方
+       if(res.header.status==200){
+           if(res.data.resCode==0){
+               //业务成功逻辑
+           }else{
+               //业务失败逻辑
+           }
+           return res.data;//例如，只将回调中的data交给业务，而在拦截器里统一处理状态
+       }else{
+           alert("网络错误")
+           return res
+       }
+   }

方法二：Vuex中进行封装

我们将请求及请求拦截器，单独放置在vuex中的一个module里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
my-projext
    |-node_modules
    |-public
    |-src
-       |-api
-           |-api.js
        |-store
+           |- modules
+               |-api.js
            |- index.js
        |-assets
        |-components
        |-router
        |-views
        |-App.vue
        |-main.js
    |-package.json

api.js中的代码为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const axios = require('axios');
export default {
state: {
apiUrl:'https://www.yoursite.com/api/'
},
mutations: {

    }，
    actions: {
        request({state,commit,dispatch},options={}){//请求方法
           this.dispatch('beforeRequest',options).then((options)=>{
                axios[options.methods](
                    apiUrl+options.url, 
                    options.data
                ).then((res)=>{
                    return Promise.resolve(res)
                }).catch(options.fail)
            }).then((res)=>{
                return this.dispatch('beforeRequest',options)
            })
        },
        beforeRequest({state,commit,dispatch},options={}){//请求前拦截
            options.header = options.header||{}
            options.header.token = this.state.userData.token;
            return Promise.resolve(options)
        },
        beforeResponse({state,commit,dispatch},res = {}) {//收到相应后拦截的地方
           if(res.header.status==200){
               if(res.data.resCode==0){
                   //业务成功逻辑
               }else{
                   //业务失败逻辑
               }
               return Promise.resolve(res.data);//例如，只将回调中的data交给业务，而在拦截器里统一处理状态
           }else{
               alert("网络错误")
               return Promise.reject(res)
           }
        }
    }
}

Page中的代码为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import {request} from '@/api/api.js';
export default {
    data(){
        return {}
    },
    methdos:{
        getData(){
            this.$store.dispatch('request',{
                url:"getData",
                data:{
                    param_1:'入参数据'
                },
                success:
            }).then((res)=>{
                console.log('成功回调')
            }).catch(()=>{
                console.log('失败回调')
            })
        }
    }
}
]]> <h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>很多人在写前端代码的时候，都不做请求封装，这样容易出现的情况是，假设在一个项目中，有100个页面，每个页面都需要向服务器发送请求，来完成数据 webpack学习笔记15-懒加载 http://www.meixiaohan.com/2019/09/11/webpack_learn_15/ 2019-09-10T16:00:00.000Z 2020-02-17T01:26:20.671Z 背景

懒加载的概念，意思是，使用到再加载，如果没有使用到，则不去加载

理解

例如，我们在写一个瀑布流的图片展示站点时，一个页面，可能会有超出屏幕数倍长度的内容，如果一次性加载所有的图片资源，会造成页面的卡顿，影响用户体验，于是有了懒加载的概念，只有滚动到这一屏幕，才会加载这一屏幕的内容（一般滚动类的会加载当前屏幕及上下各一屏幕的内容）,webpack中的懒加载，也可以这样理解。

操作

在上一节的基础上，对项目目录进行改造

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
webpack_learn
|- node_modules
|- package.json
|- webpack.config.js
|- yarn.lock
|- src
    |- let.js
    |- get.js
    |- index.js
    |- math.js
    |- print.js
|- dist
    |- vendors~lodash.bundle.js
    |- bundle.js
    |- index.html

上一章节中src中index.js的内容

1
2
3
4
5
6
7
8
9
10
import _ from "lodash";
function getLodash(){
    return import(/* webpackChunkName: "lodash" */ 'lodash').then((_)=>{//这里的注释很重要，影响打包后的包名字
        console.log(_)
    })
}
let name = require('./let.js');
let sayName = require('./get.js');
sayName('大家好,我的名字是'+name)
getLodash()

我们可以看到，getLodash()是每次都会调用的，可以设想下，如果，我们不是每次都调用，改成点击按钮才调用的话，如果用户不点击这个按钮，就不会加载了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    import _ from "lodash";
    function getLodash(){
        return import(/* webpackChunkName: "lodash" */ 'lodash').then((_)=>{//这里的注释很重要，影响打包后的包名字
            console.log(_)
        })
    }
    function createElement(tagName){
        var element = document.createElement(tagName);
        element.innerHTML = '点击我加载lodash';
        return element;
    }

+   let div = createElement('div');
+   div.onclick=function(){
+       getLodash()
+   }
+   document.body.appendChild(element);

    let name = require('./let.js');
    let sayName = require('./get.js');
    sayName('大家好,我的名字是'+name)
    getLodash()

这样就变成了，用户点击按钮时候，才会加载lodash了，这个思路可以在日常做需求的时候使用，可能更好的减少初始加载速度

]]> <h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>懒加载的概念，意思是，使用到再加载，如果没有使用到，则不去加载</p> <h1 id="理解"><a href="#理解" class="h webpack学习笔记14-动态导入 http://www.meixiaohan.com/2019/09/09/webpack_learn_14/ 2019-09-08T16:00:00.000Z 2020-02-17T01:16:28.081Z webpack还支持一种动态的模块导入方式

清理一下文件并新增一个生产与开发环境及通用配置的webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
webpack_learn
|- node_modules
|- package.json
|- webpack.config.js
|- yarn.lock
|- src
    |- let.js
    |- get.js
    |- index.js
    |- math.js
|- dist
    |- bundle.js
    |- index.html

修改config文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');

module.exports = {
    entry: {
      index: './src/index.js',
-     index2: './src/index2.js',
-     math: './src/math.js',
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            title: 'Code Splitting'
        })
    ],
-   optimization: {
-       splitChunks: {
-           cacheGroups: {
-               commons: {
-                   name: "commons",
-                   chunks: "all",
-                   minChunks: 2
-               }
-           }
-       }
-   },
    output: {
        filename: '[name].bundle.js',
+       chunkFilename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

然后修改src中index.js的内容

1
2
3
4
5
6
7
8
9
10
-   import _ from "lodash";
+   function getLodash(){
+       return import(/* webpackChunkName: "lodash" */ 'lodash').then((_)=>{//这里的注释很重要，影响打包后的包名字
+           console.log(_)
+       })
+   }
    let name = require('./let.js');
    let sayName = require('./get.js');
    sayName('大家好,我的名字是'+name)
+   getLodash()

然后执行打包指令

1
npm run build # 或者 yarn build

然后可以看到，文件目录结构变成了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
       webpack_learn
       |- node_modules
       |- package.json
       |- webpack.config.js
       |- yarn.lock
       |- src
           |- let.js
           |- get.js
           |- index.js
           |- math.js
       |- dist
+          |- vendors~lodash.bundle.js
           |- bundle.js
           |- index.html

这样动态引入的lodash就被打包进入了vendors~lodash.bundle.js文件中，从而完成了模块的动态导入

]]> <p>webpack还支持一种动态的模块导入方式</p> <p>清理一下文件并新增一个生产与开发环境及通用配置的<code>webpack.config.js</code>文件</p> <figure class="highlight plain"><table><tr><td webpack学习笔记13-代码分离 http://www.meixiaohan.com/2019/09/06/webpack_learn_13/ 2019-09-05T16:00:00.000Z 2020-02-10T03:01:22.118Z 背景

针对一个多页面向目来讲，我们希望每个包的体积都更小一些。

方案

可以使用webpack的提供的三种分离方案

  • 入口起点：使用 entry 配置手动地分离代码。
  • 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
  • 动态导入：通过模块的内联函数调用来分离代码。

写法

使用 entry 配置手动地分离代码。

清理一下文件并新增一个生产与开发环境及通用配置的config文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
       webpack_learn
       |- node_modules
       |- package.json
+      |- webpack.config.js
-      |- webpack.common.js
-      |- webpack.dev.js
-      |- webpack.prod.js
       |- yarn.lock
       |- src
           |- let.js
           |- get.js
           |- index.js
           |- math.js
       |- dist
           |- bundle.js
           |- index.html

修改新增的配置文件内容

修改 webpack.config.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  entry: {
    index: './src/index.js',
    math: './src/math.js'
  },
  plugins: [
new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: 'Code Splitting'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后修改package.json中的scripts快捷指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
  "dependencies": {
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  },
  "name": "webpack_learn",
  "sideEffects": false,
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0"
  },
  "scripts": {
+   "build": "webpack --config webpack.config.js",
-   "build": "webpack --config webpack.prod.js",
-   "serve": "webpack-dev-server --open --config webpack.dev.js",
    "watch": "webpack --watch",
    "dev": "webpack --mode development",
    "product": "webpack --mode production",
    "testParams": "webpack --mode production --env.production product --param1 1 --param2 2 --explane 这是一个说明",
    "showColorAndProgress": "webpack --progress --colors",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

修改一下index.js的内容

1
2
3
let name = require('./let.js');
let sayName = require('./get.js');
sayName('大家好,我的名字是'+name)

然后执行打包指令

1
npm run build #也可以yarn build 打包生产环境

index.bundle.js
打包后可以看到编译的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
       webpack_learn
       |- node_modules
       |- package.json
       |- webpack.config.js
       |- yarn.lock
       |- src
           |- let.js
           |- get.js
           |- index.js
           |- math.js
       |- dist
-          |- bundle.js
-          |- index.html
+          |- index.html
+          |- index.bundle.js
+          |- math.bundle.js

并且index.html中的内容如下，引入了两个js文件，而且，index.js及math.js中的代码被分离开了，达成了通过entry的配置方式进行分离

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Code Splitting</title>
  </head>
  <body>
  <script type="text/javascript" src="index.bundle.js"></script>
  <script type="text/javascript" src="math.bundle.js"></script>
  </body>
</html>

使用 CommonsChunkPlugin 去重和分离 chunk

CommonsChunkPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。

继续修改文件目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
       webpack_learn
       |- node_modules
       |- package.json
       |- webpack.config.js
       |- yarn.lock
       |- src
           |- let.js
           |- get.js
           |- index.js
+          |- index2.js
           |- math.js
       |- dist
           |- index.html
           |- index.bundle.js
           |- math.bundle.js

1
2
3
4
//index2.js
+    let name = require('./let.js');
+    let sayName = require('./get.js');
+    sayName('大家好,我的名字2是'+name)

修改 webpack.config.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  entry: {
    index: './src/index.js',
    index2: './src/index2.js',
    math: './src/math.js'
  },
  plugins: [
new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: 'Code Splitting'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

然后执行打包指令

1
npm run build #也可以yarn build 打包生产环境

然后可以看到，index2.bundle.js与index.bundle.js中，均出现了重复的代码

1
([function(e,t){e.exports="小明"},function(e,t){e.exports=function(e){console.log(e)}}

为了解决这种情况，可以使用CommonsChunkPlugin 去重和分离 chunk

修改 webpack.config.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    const path = require('path');
    const HTMLWebpackPlugin = require('html-webpack-plugin');
+   const webpack = require('webpack');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
      entry: {
        index: './src/index.js',
        index2: './src/index2.js',
        math: './src/math.js'
      },
      plugins: [
    new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
          title: 'Code Splitting'
-       })
+      }),
+      new webpack.optimize.CommonsChunkPlugin({
+        name: 'common' // 指定公共 bundle 的名称。
+      })
      ],
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

然后执行打包指令

1
npm run build #也可以yarn build 打包生产环境

此时打包报错了，提示信息

1
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

修改 webpack.config.js 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
    const path = require('path');
    const HTMLWebpackPlugin = require('html-webpack-plugin');
-   const webpack = require('webpack');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    module.exports = {
      entry: {
        index: './src/index.js',
        index2: './src/index2.js',
        math: './src/math.js'
      },
      plugins: [
    new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
          title: 'Code Splitting'
-      }),
-      new webpack.optimize.CommonsChunkPlugin({
-        name: 'common' // 指定公共 bundle 的名称。
-      })
    ],
  
+    optimization: {
+    splitChunks: {
+        cacheGroups: {
+            commons: {
+                name: "commons",
+                chunks: "all",
+                minChunks: 2
+            }
+        }
+        }
+    },
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };

webpack.optimize.CommonsChunkPlugin这个模块被移除了，请使用config.optimization.splitChunks代替，查询文档地址

但是我们发现，再次打包，也没有单独生成一个我们命名的commons.bundle.js

初步怀疑是，公共代码包里的代码体积过小，导致的没有打包，我们将index.js和index2.js中引入一个巨大的lodash模块再来尝试一下

1
2
3
4
5
6
7
8
9
10
11
//index.js
+   import _ from 'lodash';
let name = require('./let.js');
    let sayName = require('./get.js');
    sayName('大家好,我的名字是'+name)

//index2.js
+   import _ from 'lodash';
let name = require('./let.js');
    let sayName = require('./get.js');
    sayName('大家好,我的名字2是'+name)

然后执行打包指令

1
npm run build #也可以yarn build 打包生产环境

打包结果如下

AssetSizeChunksChunk Names
commons.bundle.js71.1 KiB0 [emitted]commons
index.bundle.js1.64 KiB1 [emitted]index
index.html379 bytes[emitted]
index2.bundle.js1.58 KiB2 [emitted]index2
math.bundle.js1.18 KiB3 [emitted]math

可以看到，lodash模块被打包进了commons.bundle.js从而实现了公共代码的分离

]]> <h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>针对一个多页面向目来讲，我们希望每个包的体积都更小一些。</p> <h1 id="方案"><a href="#方案" class="head webpack学习笔记12-生产环境构建 http://www.meixiaohan.com/2019/09/03/webpack_learn_12/ 2019-09-02T16:00:00.000Z 2020-01-21T09:09:35.763Z 背景

通常，我们在开发一个应用的时候，会有生产环境与开发环境的概念，生产环境中，我们需要体积最小的代码，以及图片等静态文件使用cdn上的服务，开发环境上，需要热更新，source-map等来快速排错，目标不同。

方案

我们可以分别为生产环境与测试环境编写一个配置文件，并且使用webpack-merge来组合通用配置及专属配置。

写法

  1. 首先安装webpack-merge

    1
    npm install webpack-merge # 或者yarn add webpack-merge

  2. 清理一下文件并新增一个生产与开发环境及通用配置的config文件，webpack.common.js、webpack.dev.js、webpack.prod.js。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
           webpack_learn
           |- node_modules
           |- package.json
    -      |- webpack.config.js
    +      |- webpack.common.js
    +      |- webpack.dev.js
    +      |- webpack.prod.js
           |- yarn.lock
           |- src
               |- let.js
               |- get.js
               |- index.js
    -          |- math.js
           |- dist
               |- bundle.js
               |- index.html

修改新增的配置文件内容

webpack.common.js通用文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

+     const path = require('path');
+     const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+     const HtmlWebpackPlugin = require('html-webpack-plugin');
+     
+     module.exports = {
+       entry: {
+         app: './src/index.js'
+       },
+       plugins: [
+         new CleanWebpackPlugin(),
+         new HtmlWebpackPlugin({
+           title: 'Production'
+         })
+       ],
+       output: {
+         filename: '[name].bundle.js',
+         path: path.resolve(__dirname, 'dist')
+       }
+     };

webpack.dev.js开发环境配置文件

1
2
3
4
5
6
7
8
9
+     const merge = require('webpack-merge');
+     const common = require('./webpack.common.js');
+     
+     module.exports = merge(common, {
+       devtool: 'inline-source-map',
+       devServer: {
+         contentBase: './dist'
+       }
+     });

webpack.prod.js生产环境配置文件

1
2
3
4
5
6
7
8
9
+     const merge = require('webpack-merge');
+     const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+     const common = require('./webpack.common.js');
+     
+     module.exports = merge(common, {
+       plugins: [
+         new UglifyJSPlugin()
+       ]
+     });

  1. 无论生产环境还是开发环境，都清理dist目录，新建index.html
  2. 开发环境基于dist目录建立本地服务器，并添加source-map来快速排错，且使用webpack-merge来合并webpack.common.js通用配置文件中的配置内容
  3. 生产环境开启摇树优化tree-shakeing，且使用webpack-merge来合并webpack.common.js通用配置文件中的配置内容

然后修改package.json中的scripts快捷指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "dependencies": {
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "webpack-merge": "^4.2.2"
  },
  "name": "webpack_learn",
  "sideEffects": false,
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0"
  },
  "scripts": {
-   "build": "webpack",
+   "build": "webpack --config webpack.prod.js",
-   "serve": "webpack-dev-server --open",
+   "serve": "webpack-dev-server --open --config webpack.dev.js",
    "watch": "webpack --watch",
    "dev": "webpack --mode development",
    "product": "webpack --mode production",
    "testParams": "webpack --mode production --env.production product --param1 1 --param2 2 --explane 这是一个说明",
    "showColorAndProgress": "webpack --progress --colors",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

然后执行打包指令

1
2
npm run serve #也可以yarn serve 运行开发环境
npm run build #也可以yarn build 打包生产环境

可以看到报了个错

1
2
ERROR in app.bundle.js from UglifyJs
Unexpected token: name «name», expected: punc «;» [app.bundle.js:91,4]

这个问题在于，UglifyJs对es6语法的解析有问题，需要转成es5后再次打包

webpack.prod.js中增加babel配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

    const merge = require('webpack-merge');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    const common = require('./webpack.common.js');
    
    module.exports = merge(common, {
+       module: {
+           rules: [{
+               //里面为匹配的规则
+               test: /\.m?js$/,
+               exclude: /(node_modules|bower_components)/,
+               use: {
+                   loader: 'babel-loader',
+                   options: {
+                       presets: ['@babel/preset-env']
+                   }
+               }
+           }]
+       },
        plugins: [
            new UglifyJSPlugin()
        ]
    });

然后执行打包

1
npm run build #也可以yarn build 打包生产环境

就打爆了生产版本，经过了tree-shaking的版本

]]> <h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>通常，我们在开发一个应用的时候，会有生产环境与开发环境的概念，生产环境中，我们需要体积最小的代码，以及图片等静态文件使用<code>cdn< webpack学习笔记11-tree shaking http://www.meixiaohan.com/2019/09/01/webpack_learn_11/ 2019-08-31T16:00:00.000Z 2020-01-20T04:14:54.845Z 背景

由于，我们在开发过程中，会引入很多大大小小的模块，比如一个计算方法通用的大包，封装了很多很多的方法，但是我们只用到了其中一两个方法，往往希望，打包只打包使用到的方法，未使用到的方法，不被打包进最后的代码中，以保持体积的最小化。

方案

webpack为这种情况，提供了tree shaking

写法

  1. 清理一下文件并新增一个math.js。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   webpack_learn
   |- node_modules
   |- package.json
   |- webpack.config.js
   |- yarn.lock
-  |- staticFrom
-      |- test.txt
   |- src
       |- let.js
       |- get.js
       |- index.js
+      |- math.js
   |- dist
       |- bundle.js
-      |- main.js
       |- index.html
-      |- test.txt
  1. 修改math.js的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    //math.js
+   export function square(x) {//平方
+     return x * x;
+   }
+   
+   export function cube(x) {//立方
+     return x * x * x;
+   }
+   
+   export function add(x,y) {//求和
+     return x + y;
+   }
+   
+   export function cut(x,y) {//计算差
+     return x - y;
+   }

修改index.js

1
2
3
4
5
6
7
    let name = require('./let.js');
    let sayName = require('./get.js');
+   let math = require('./math.js');
    
    sayName('大家好,我的名字是'+name)
+   console.log(math.add(2,3))
+   console.log(math.add(9,18))

然后执行打包指令

1
npm run build #也可以yarn build

打包后的代码如下

1
2
3
4
5
!function(n){var t={};function e(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return n[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}e.m=n,e.c=t,e.d=function(n,t,r){e.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:r})},e.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},e.t=function(n,t){if(1&t&&(n=e(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var o in n)e.d(r,o,function(t){return n[t]}.bind(null,o));return r},e.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return e.d(t,"a",t),t},e.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},e.p="",e(e.s=0)}([function(n,t,e){var r=e(1),o=e(2),u=e(3);o("大家好,我的名字是"+r),console.log(u.add(2,3))},function(n,t){n.exports="小明"},function(n,t){n.exports=function(n){console.log(n)}},function(n,t,e){"use strict";function r(n){return n*n}function o(n){return n*n*n}function u(n,t){return n+t}function c(n,t){return n-t}e.r(t),
e.d(t,"square",(function(){return r})),
e.d(t,"cube",(function(){return o})),
e.d(t,"add",(function(){return u})),
e.d(t,"cut",(function(){return c}))}]);

可以看出，我们只使用了math.js中的add方法，但是打包后的内容里math.js中导出的square、cube、add、cut方法都被打包了，这显然不是我们想要的结果。

我们修改package.json的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
    {
      "dependencies": {
        "babel-loader": "^8.0.6",
        "copy-webpack-plugin": "^5.1.1",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.1"
      },
      "name": "webpack_learn",
      "version": "1.0.0",
      "main": "index.js",
      "devDependencies": {
        "@babel/core": "^7.7.7",
        "@babel/preset-env": "^7.7.7",
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.7.0"
      },
      "scripts": {
        "build": "webpack",
        "watch": "webpack --watch",
        "serve": "webpack-dev-server --open",
        "dev": "webpack --mode development",
        "product": "webpack --mode production",
        "testParams": "webpack --mode production --env.production product --param1 1 --param2 2 --explane 这是一个说明",
        "showColorAndProgress": "webpack --progress --colors",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
+     "sideEffects": false,
      "license": "ISC",
      "description": ""
    }

然后执行打包指令

1
npm run build #也可以yarn build

然后我们发现，打包指令中，依然包含math.js导出的四个方法

修改index.js文件

1
2
3
4
5
6
7
8
9
10
    let name = require('./let.js');
    let sayName = require('./get.js');
-   let math = require('./math.js');
+   import {add} from './math.js'
    sayName('大家好,我的名字是'+name)
-   console.log(math.add(2,3))
-   console.log(math.add(9,18))

+   console.log(add(2,3))
+   console.log(add(9,18))

修改webpack.config.js文件增加mode:"production"

再次打包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
!function(e) {
    var t = {};
    function n(r) {
        if (t[r])
            return t[r].exports;
        var o = t[r] = {
            i: r,
            l: !1,
            exports: {}
        };
        return e[r].call(o.exports, o, o.exports, n),
        o.l = !0,
        o.exports
    }
    n.m = e,
    n.c = t,
    n.d = function(e, t, r) {
        n.o(e, t) || Object.defineProperty(e, t, {
            enumerable: !0,
            get: r
        })
    }
    ,
    n.r = function(e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
            value: "Module"
        }),
        Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }
    ,
    n.t = function(e, t) {
        if (1 & t && (e = n(e)),
        8 & t)
            return e;
        if (4 & t && "object" == typeof e && e && e.__esModule)
            return e;
        var r = Object.create(null);
        if (n.r(r),
        Object.defineProperty(r, "default", {
            enumerable: !0,
            value: e
        }),
        2 & t && "string" != typeof e)
            for (var o in e)
                n.d(r, o, function(t) {
                    return e[t]
                }
                .bind(null, o));
        return r
    }
    ,
    n.n = function(e) {
        var t = e && e.__esModule ? function() {
            return e.default
        }
        : function() {
            return e
        }
        ;
        return n.d(t, "a", t),
        t
    }
    ,
    n.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }
    ,
    n.p = "",
    n(n.s = 2)
}([function(e, t) {
    e.exports = "小明"
}
, function(e, t) {
    e.exports = function(e) {
        console.log(e)
    }
}
, function(e, t, n) {
    "use strict";
    function r(e, t) {
        return e + t
    }
    n.r(t);
    var o = n(0);
    n(1)("大家好,我的名字是" + o),
    console.log(r(2, 3)),
    console.log(r(9, 18))
}
]);

最后的结果，可以看出，add方法被打包成了

1
2
3
4
function r(e, t) {
return e + t
}
n.r(t);

而其他的方法并没有被打包进来，实现了代码的裁剪，根据表现来看，如果你希望使用webpack的tree-shaking的话，需要如下使用

  1. js文件中，每一个方法，都需要使用exports导出，使用方法的地方，使用impoet {xxx} from 'xx/xx'来按需导入，使用require是无法完成按需导入的
  2. package.json中，增加"sideEffects": false声明文档安全性是否拥有副作用，
  3. config.webpack.js中，增加mode:production或者使用webpack的UglifyJSPlugin插件
]]> <h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>由于，我们在开发过程中，会引入很多大大小小的模块，比如一个计算方法通用的大包，封装了很多很多的方法，但是我们只用到了其中一两个方法，往往希望 webpack学习笔记10-热更新 http://www.meixiaohan.com/2019/08/27/webpack_learn_10/ 2019-08-26T16:00:00.000Z 2020-01-15T09:50:19.495Z 背景

在上一节中，已经能够生成一个能够自动重新编译本地服务器了，但是，有一个问题，在项目写的比较大的时候，每次打包的时间就会变得很长，为了解决这个问题，webpack也支持使用模块热替换的方式来进行差异修改，也就是热更新，可以在每次修改的时候，只重新刷新修改的那一部分，这样刷新的速度就会变得很快了。

方案

webpack为这种情况，提供了插件

  1. HotModuleReplacementPlugin启用热模块更换，也称为HMR
  2. NamedModulesPlugin该插件会显示模块的相对路径

写法

修改config.webpack.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
    //config.webpack.js
    const path = require('path')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
+   const webpack = require('webpack');
    module.exports = {
        //配置函数接受两个参数env和argv
        //env:环境对象
        //Webpack-CLI 的命令行选项
        entry: './src/index.js', //设置默认
        output: {
            ...,
        },
        devtool: 'inline-source-map',
        module: {
            ...,
        },
        devServer: {
            contentBase: './dist',
+           hot: true
        },
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.join(__dirname, '/staticFrom/'),
                    to: path.join(__dirname+'/dist/')
                }
            ]),
+         new webpack.NamedModulesPlugin(),
+         new webpack.HotModuleReplacementPlugin()        
        ]
    }

然后修改package.json中的script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    //package.json
    {
      "dependencies": {
        "babel-loader": "^8.0.6",
        "copy-webpack-plugin": "^5.1.1",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.1"
      },
      "name": "webpack_learn",
      "version": "1.0.0",
      "main": "index.js",
      "devDependencies": {
        "@babel/core": "^7.7.7",
        "@babel/preset-env": "^7.7.7",
        "babel-core": "^6.26.3",
        "babel-preset-env": "^1.7.0"
      },
      "scripts": {
        "build": "webpack",
        "watch": "webpack --watch",
-       "serve": "webpack-dev-server --open",
+       "serve": "webpack-dev-server --hotOnly",
        "dev": "webpack --mode development",
        "product": "webpack --mode production",
        "testParams": "webpack --mode production --env.production product --param1 1 --param2 2 --explane 这是一个说明",
        "showColorAndProgress": "webpack --progress --colors",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "description": ""
    }

然后在命令行中执行

1
npm run serve #也可以yarn watch

此时，就是模块热更新的开发状态啦

]]> <h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>在上一节中，已经能够生成一个能够自动重新编译本地服务器了，但是，有一个问题，在项目写的比较大的时候，每次打包的时间就会变得很长，为了解决这个 webpack学习笔记9-建立开发环境 http://www.meixiaohan.com/2019/08/23/webpack_learn_9/ 2019-08-22T16:00:00.000Z 2020-01-20T06:06:22.122Z 背景

在我们的开发中，很多的代码会频繁的变动，如果每次改动都使用npm run build来打包的话，是一件效率很低的事情，而且这个服务，一般来说，打包的时候，才需要使用，因此需要一个本地服务的，可以快捷的看到打包后的内容

方案

webpack为这种情况，提供了观察者模式，在每次文件发生变动的时候，自动执行编译，就不用每次都npm run build来打包了

写法

watch 自动编译修改的文件

我们可以在scripts中，新加一条命令webpack --watch来启动观察者模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//package.json
{
  "dependencies": {
    "babel-loader": "^8.0.6",
    "copy-webpack-plugin": "^5.1.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "name": "webpack_learn",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/preset-env": "^7.7.7",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0"
  },
  "scripts": {
    "build": "webpack",
+   "watch": "webpack --watch",
    "dev": "webpack --mode development",
    "product": "webpack --mode production",
    "testParams": "webpack --mode production --env.production product --param1 1 --param2 2 --explane 这是一个说明",
    "showColorAndProgress": "webpack --progress --colors",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

然后在命令行中执行

1
npm run watch #也可以yarn watch

然后我们在浏览器中，打开刚才的文件，并且查看控制台，控制台中打印了大家好,我的名字是小明，然后我们修改一下/src/let.js,及index.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    //let.js
-   let name = '小明';
+   let name = '小刚;
    module.exports = name;
    
    
    //index.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
-           <script src="./main.js" type="text/javascript" charset="utf-8"></script>
+           <script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
        </body>
    </html>

然后保存文件，然后在刚打开的浏览器里，刷新页面，然后控制台中，变成了大家好,我的名字是小刚。这样，每次修改就不用执行打包指令了

sourceMap 查找报错所在

开发中，最重要的一个环节，就是代码的调试，如果我们在写的代码中，出现了报错，希望很快的知道是哪里的报错，但是在webpack中，代码经过层层的模块打包，合并成了最后的一个js文件，里面的内容是编译后的内容，

我们尝试一下报错，将刚刚的get.js中，加一个报错信息。

1
2
3
4
5
    //get.js
module.exports = function(name){
console.log(name)
+       throw new Error('这里有个报错')
};
1
2
3
4
5
6
bundle.js:1 Uncaught Error: 这里有个报错
    at e.exports (bundle.js:1)
    at Object.<anonymous> (bundle.js:1)
    at n (bundle.js:1)
    at bundle.js:1
    at bundle.js:1

报错信息指向了bundle.js打包后的文件，这显然不是我们想要的

这个时候，我们可以使用sourceMap来解决这个问题。

1
2
3
4
5
6
7
8
9
10
11
12
//webpack.config.js
module.exports = {
    entry:{
        ...
    },
    output:{
        ...
    },
+   devtool: 'inline-source-map',
    module:{},
    plugins:{}
}

然后重新执行

1
npm run watch

这样，控制台的报错就变成了

1
2
3
4
5
6
get.js:3 Uncaught Error: 这里有个报错
    at e.exports (get.js:3)
    at Object.<anonymous> (index.js:4)
    at n (bootstrap:19)
    at bootstrap:83
    at bundle.js:1

指向了正确的位置，我们复原代码，进行下一步尝试

1
2
3
4
5
    //get.js
module.exports = function(name){
console.log(name)
-       throw new Error('这里有个报错')
};

webpack-dev-server 自动刷新页面

前面讲述了观察者模式及报错位置查找，但是美中不足的是，我们每次需要手动刷新来观察变化，这种情况下，可以使用webpack中的的webpack-dev-server模块，来完成自动更新的行为

首先安装webpack-dev-server

1
npm install webpack-dev-server #或者yarn add webpack-dev-server

安装完毕后，修改一下webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    const path = require('path')
    const CopyWebpackPlugin = require('copy-webpack-plugin')
    
    module.exports = {
        //配置函数接受两个参数env和argv
        //env:环境对象
        //Webpack-CLI 的命令行选项
        entry: './src/index.js', //设置默认
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
devtool: 'inline-source-map',
+       devServer: {
+           contentBase: './dist'
+       },
        module: {
            rules: [{
                //里面为匹配的规则
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }]
        },
        plugins: [
            new CopyWebpackPlugin([
                {
                    from: path.join(__dirname, '/staticFrom/'),
                    to: path.join(__dirname+'/dist/')
                }
            ])
        ]
    }

声明开发服务，并将 dist 目录下的文件，作为可访问文件，并且修改package.json中声明一条

1
2
3
4
5
6
7
    {
        ...,
        "scripts":{
            ...,
+           "serve": "webpack-dev-server --open"
        }
    }

然后执行

1
npm run serve # 或者yarn serve

执行完毕后，浏览器自动打开了一个地址为localhost:8080的网页，打开控制台，可以看到我们刚刚写入的大家好,我的名字是小刚，然后我们继续把小刚，改回刚才的小明

1
2
3
4
    //let.js
-   let name = '小刚;
+   let name = '小明';
    module.exports = name;

然后保存，浏览器的控制台，自动的就变化成了大家好,我的名字是小明；

这样就建立了一个开发用的服务器，且每次修改，都会重新编译。

]]> <h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><p>在我们的开发中，很多的代码会频繁的变动，如果每次改动都使用<code>npm run build</code>来打包的话，是一件效率很低的事 webpack学习笔记8-名词解释 http://www.meixiaohan.com/2019/08/19/webpack_learn_8/ 2019-08-18T16:00:00.000Z 2020-01-15T02:13:09.606Z 之前已经简单的了解了webpack中配置文件、loader、插件、如何安装了

这里统一加一个名词解释

名词解释

参数说明备注
mode项目环境webpack4.0中出的模式概念，可以传入development(开发环境)/production(生产环境)，理解为可以通过不同的config文件来分别配置生产与测试环境
entry项目入口webpack开始打包的入口文件，打包这个文件里，引用的其他包，及引入的包所再次引入的包，每个html文档只使用一个依赖图，也就是entry
output项目出口webpack打包完成后，输出的文件，可以使用webpack占位符占位符
module开发中每一个文件都可以看做 module，模块不局限于 js，也包含 css、图片等使校验、调试、测试、扩展、复用都轻而易举 例如：什么是模块
loader模块转化器，模块的处理器，对模块进行转换处理提供了处理前端构建步骤的强大方法，如将额外的语言typescript转化为javascript，将图片转换为base64格式来减少一次请求等 loader使用方式
plugin扩展插件，插件可以处理 chunk，也可以对最后的打包结果进行处理，可以完成 loader 完不成的任务插件是 webpack 的支柱功能,由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。
context上下文，也是基础目录，绝对路径，用于从配置中解析入口起点(entry point)和 loader默认值为path.resolve(__dirname, “app”)，也就是当前路径 如何修改context

webpack占位符

模板描述
[hash]模块标识符(module identifier)的 hash
[chunkhash]chunk 内容的 hash
[name]模块名称
[id]模块标识符(module identifier)
[query]模块的 query，例如，文件名 ? 后面的字符串

什么是模块

  1. ES2015 中的 import 语句
  2. CommonJS 中的 require() 语句
  3. AMD define 和 require 语句
  4. css/sass/less 文件中的 @import 语句。
  5. 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

loader使用方式

  1. 配置（推荐）：在 webpack.config.js 文件中指定 loader，这样在维护的时候，只需要查找这一个文件即可。
  2. 内联：在每个 import 语句中显式指定 loader。
  3. CLI：在 shell 命令中指定它们。

如何修改context

1
2
3
4
// webpack.config.js
module.exports = {
    context: '一个绝对路径'
};

备注：context是一切打包的相对地址，所以这个值，一定要填写一个绝对地址，默认为当前目录

]]> <p>之前已经简单的了解了<code>webpack</code>中<code>配置文件</code>、<code>loader</code>、<code>插件</code>、<code>如何安装</code>了</p> <p>这里统一加一个名词解释</p> <h2 id="名词 webpack学习笔记7-插件 http://www.meixiaohan.com/2019/08/15/webpack_learn_7/ 2019-08-14T16:00:00.000Z 2020-01-20T06:36:27.340Z 前面已经说明了，webpack是一个打包工具

在webpack中，还有个概念，叫插件plugins

  1. loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
  2. 插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
  3. 用来解决一些loaders无法处理的事情

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

例如，我们想在打包的时候，把A文件夹中的数据，放到B文件夹中，可以使用copy-webpack-plugin来进行文件的复制行为

copy-webpack-plugin文档
修改原来的文件目录

1
2
3
4
5
6
7
8
9
10
11
12
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
+   |- staticFrom
+       |- test.txt
    |- src
        |- let.js
        |- get.js
        |- index.js
    |- dist
        |- main.js

由于使用了copy-webpack-plugin模块，根据commonJs规范，我们需要require这个文件,并且使用npm安装它

1
npm install copy-webpack-plugin #或者yarn add copy-webpack-plugin

我们将config.webpack.js文件修改为如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//config.webpack.js

    const path = require('path')
+   const CopyWebpackPlugin = require('copy-webpack-plugin')

    module.exports = {
        //配置函数接受两个参数env和argv
        //env:环境对象
        //Webpack-CLI 的命令行选项
        entry: './src/index.js', //设置默认
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [{
                //里面为匹配的规则
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }]
        },
+       plugins: [
+           new CopyWebpackPlugin([
+               {
+                   from: path.join(__dirname, '/staticFrom/'),//将staticFrom文件夹内所有文件
+                   to: path.join(__dirname+'/dist/')//复制到根目录下/dist/文件夹内
+               }
+           ])
+       ]
    }

然后再执行

1
npm run build #或者yarn build

然后，打包后的文件目录，变成了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
    |- staticFrom
        |- test.txt
    |- src
        |- let.js
        |- get.js
        |- index.js
    |- dist
        |- bundle.js
        |- main.js
+       |- test.txt
        |- index.html

test.txt文件就被复制到了dist目录下

这样就成功的使用了webpack插件中的复制插件copy-webpack-plugin

我们在每次打包的时候，如果是同名文件，则会覆盖之前的文件，但是，并没有清除，已经更改后的文件，例如dist目录下的main.js
此时，我们可以使用clean-webpack-plugin插件来清理dist目录，但时刚才，我们的index.html是自己手动新建的，如果清除掉，还需要新建，为了自动化完成这个工作，有两种方案

  1. 使用copy-webpack-plugin插件，复制一个index.html文件到dist目录，方法参考上方
  2. 使用html-webpack-plugin插件，每次都创建一个index.html文件

首先我们使用npm安装它们

1
2
npm install clean-webpack-plugin #或者yarn add clean-webpack-plugin
npm install html-webpack-plugin #或者yarn add html-webpack-plugin

然后修改config.webpack.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//config.webpack.js

    const path = require('path')
+   const { CleanWebpackPlugin } = require('copy-webpack-plugin')
+   const HtmlWebpackPlugin = require('html-webpack-plugin');
+   const CleanWebpackPlugin = require('clean-webpack-plugin');

    module.exports = {
        //配置函数接受两个参数env和argv
        //env:环境对象
        //Webpack-CLI 的命令行选项
        entry: './src/index.js', //设置默认
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [{
                //里面为匹配的规则
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }]
        },
        plugins: [
+           new CleanWebpackPlugin(),//webpack网站上的示例为new CleanWebpackPlugin(['dist'])，这种写法由于CleanWebpackPlugin更新导致不兼容的情况，正确写法如左方所示
+           new HtmlWebpackPlugin({
+                title: 'Output Management'
+           }),
            new CopyWebpackPlugin([
                {
                    from: path.join(__dirname, '/staticFrom/'),//将staticFrom文件夹内所有文件
                    to: path.join(__dirname+'/dist/')//复制到根目录下/dist/文件夹内
                }
            ])
        ]
    }

然后再执行

1
npm run build #或者yarn build

这样，dist目录，每次都会清理并新建index.html文件了

]]> <p>前面已经说明了，<code>webpack</code>是一个打包工具</p> <p>在<code>webpack</code>中，还有个概念，叫插件<code>plugins</code></p> <ol> <li>loader 被用于转换某些类型的模块，而插件则可以用于 webpack学习笔记6-插件 http://www.meixiaohan.com/2019/08/11/webpack_learn_6/ 2019-08-10T16:00:00.000Z 2020-01-13T10:29:09.649Z 前面已经说明了，webpack是一个打包工具

在webpack中，还有个概念，叫插件plugins

  1. loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
  2. 插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
  3. 用来解决一些loaders无法处理的事情

webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

例如，我们想在打包的时候，把A文件夹中的数据，放到B文件夹中，可以使用copy-webpack-plugin来进行文件的复制行为

copy-webpack-plugin文档
修改原来的文件目录

1
2
3
4
5
6
7
8
9
10
11
12
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
+   |- staticFrom
+       |- test.txt
    |- src
        |- let.js
        |- get.js
        |- index.js
    |- dist
        |- main.js

由于使用了copy-webpack-plugin模块，根据commonJs规范，我们需要require这个文件,并且使用npm安装它

1
npm install copy-webpack-plugin #或者yarn add copy-webpack-plugin

我们将config.webpack.js文件修改为如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//config.webpack.js

    const path = require('path')
+   const CopyWebpackPlugin = require('copy-webpack-plugin')

    module.exports = {
        //配置函数接受两个参数env和argv
        //env:环境对象
        //Webpack-CLI 的命令行选项
        entry: './src/index.js', //设置默认
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'dist')
        },
        module: {
            rules: [{
                //里面为匹配的规则
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }]
        },
+       plugins: [
+           new CopyWebpackPlugin([
+               {
+                   from: path.join(__dirname, '/staticFrom/'),//将staticFrom文件夹内所有文件
+                   to: path.join(__dirname+'/dist/')//复制到根目录下/dist/文件夹内
+               }
+           ])
+       ]
    }

然后再执行

1
npm run build #或者yarn build

然后，打包后的文件目录，变成了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
    |- staticFrom
        |- test.txt
    |- src
        |- let.js
        |- get.js
        |- index.js
    |- dist
        |- bundle.js
        |- main.js
+       |- test.txt
        |- index.html

test.txt文件就被复制到了dist目录下

这样就成功的使用了webpack插件中的复制插件copy-webpack-plugin

]]> <p>前面已经说明了，<code>webpack</code>是一个打包工具</p> <p>在<code>webpack</code>中，还有个概念，叫插件<code>plugins</code></p> <ol> <li>loader 被用于转换某些类型的模块，而插件则可以用于 webpack学习笔记4-使用配置文件 http://www.meixiaohan.com/2019/08/08/webpack_learn_4/ 2019-08-07T16:00:00.000Z 2020-01-13T10:30:05.391Z webpack可以使用配置文件，也就是名为webpack.config.js的文件，webpack.config.js也是遵循CommonJS规范的

1
2
3
4
5
6
7
8
9
10
11
12
webpack_learn
|- node_modules
|- package.json
|- yarn.lock
|- webpack.config.js
|- src
    |- let.js
    |- get.js
    |- index.js
|- dist
    |- main.js
    |- index.html

webpack.config.js为webpack的配置文件

1
2
3
4
5
6
7
8
9
10
11
12
//webpack.config.js
const path = require('path');//引入nodejs的path模块
module.exports = {
  entry: './src/index.js',//设置入口js文件
  output: {
    filename: 'bundle.js',//设置输出的js文件名
    path: path.resolve(__dirname, 'dist'//设置输出的地址
  }
};

//path.resolve() 方法将路径或路径片段的序列解析为绝对路径
//__dirname为项目根目录

之后，我们再继续运行来打包看一下

1
npm run build

由于设置了输出文件的文件名，此时，文档结构改变为

1
2
3
4
5
6
7
8
9
10
11
12
13
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
    |- webpack.config.js
    |- src
        |- let.js
        |- get.js
        |- index.js
    |- dist
+       |- bundle.js
        |- main.js
        |- index.html

将index.html中的引入文件，改变为bundle.js,一样可以console出“大家好,我的名字是小明”

配置项详细地址

一条一条刷配置的事情，我们先放到后面，一步一步来

讲到配置文件了，而且配置文件遵循CommonJS规范，那么，我们只需要遵守最终使用module.exports来输出配置对象即可，一开始也提到过了，每个使用模块的地方，只关心引入模块的结果，并不关心内部如何实现的，我们尝试将webpack.config.js文件修改为如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//webpack.config.js
const path = require('path');//引入nodejs的path模块

module.exports = function(env,argv){
    //配置函数接受两个参数env和argv
    //env:环境对象
    //Webpack-CLI 的命令行选项
    console.log(env,argv,process.env.NODE_ENV,7);
    return {
      entry: './src/index.js',//设置入口js文件
      output: {
        filename: 'bundle.js',//设置输出的js文件名
        path: path.resolve(__dirname, 'dist'//设置输出的地址
      }
    };
}

// path.resolve() 方法将路径或路径片段的序列解析为绝对路径
// __dirname为项目根目录

然后为加一个script

1
2
3
4
5
6
7
{
    ...,
    "scripts": {
        ...,
+       "testParams": "webpack --mode production --env.production product --param1 1 --param2 2 --explane 这是一个说明"
    }
}

然后执行指令

1
npm run testParams #也可以使用 yarn testParams

查看终端的console记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{ production: 'product' } {
  _: [],
  cache: null,
  bail: null,
  profile: null,
  color: { level: 3, hasBasic: true, has256: true, has16m: true },
  colors: { level: 3, hasBasic: true, has256: true, has16m: true },
  mode: 'production',
  env: { production: 'product' },
  param1: 1,
  param2: 2,
  explane: '这是一个说明',
  'info-verbosity': 'info',
  infoVerbosity: 'info',
  '$0': 'node_modules\\webpack\\bin\\webpack.js'
} 7

env参数为{ production: 'product' }

argv参数包含了我们在package.json里写入的param1,param2,explane参数，我们可以根据script携带参数，来在webpack的配置文件里做一些操作

另外，这个文件也是支持promise来操作的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//webpack.config.js
const path = require('path');//引入nodejs的path模块

module.exports = function(env,argv){
    //配置函数接受两个参数env和argv
    //env:环境对象
    //Webpack-CLI 的命令行选项
    console.log('promise前',(new Date().getTime()));//promise前 1578884886284
    return new Promse((resolve,reject)=>{
        setTimeout(()=>{
            console.log('promise后',(new Date().getTime()));//promise后 1578884889286
            resolve({
              entry: './src/index.js',//设置入口js文件
              output: {
                filename: 'bundle.js',//设置输出的js文件名
                path: path.resolve(__dirname, 'dist'//设置输出的地址
              }
            })
        },3000)
    });
}

// path.resolve() 方法将路径或路径片段的序列解析为绝对路径
// __dirname为项目根目录

可以看出，使用Promise，可以使webpack三秒后打包

webpack也支持多次打包

1
2
3
4
5
6
7
8
9
module.exports = [
    {
        mode: 'production'
        // 配置1
    },
    {
        // 配置2
    }
];

关于使用配置文件，webpack是会默认寻找根目录下的webpack.config.js文件，所以执行指令的时候，执行的是

1
2
npx webpack #这是简写模式
npx webpack --config webpack.config.js #这是实际执行的模式

webpack 可以通过–config指令，来指定使用哪个config文件来进行打包

例如

1
2
3
4
5
6
7
8
//package.json
{
    "scripts":{
        "build1": "webpack --config webpack.config.js",
        "build2": "webpack --config webpack111111.config.js",
        "build3": "webpack --config webpack222222.config.js",
    }
}

目前的内容，有一些什么问题呢？

我们在代码中，使用了let、module.exports等es6出的内容，众所周知，es6新加的内容，在一些老版本的浏览器里并不支持，就会报错，为了解决这种问题，我们就需要引入babel来将es6转化为es5，这样大部分老版本浏览器就支持了

这个时候，就要引入webpack的loader的概念，loader将在下一节记录

]]> <p><code>webpack</code>可以使用配置文件，也就是名为<code>webpack.config.js</code>的文件，<code>webpack.config.js</code>也是遵循<code>CommonJS规范</code>的</p> <figur webpack学习笔记5-loader http://www.meixiaohan.com/2019/08/08/webpack_learn_5/ 2019-08-07T16:00:00.000Z 2020-01-13T10:30:01.920Z 概念

webpack 的配置文件，也就是名为webpack.config.js的文件中，有一个module的属性配置，可以在此属性内，配置相关的规则

可以使用module.rules来进行规则匹配，键值为一个数组，分别传入不同的匹配规则rule

创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。

每个rule可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)。

例如：我们想给js文件，使用babel-loader来把es6代码转为es5代码

既然使babel-loader，那么我们首先需要安装babel-loader，根据babel-loader的npm社区所写

1
npm install -D babel-loader @babel/core @babel/preset-env webpack

建议使用yarn来安装

1
yarn add -D babel-loader @babel/core @babel/preset-env webpack

然后将webpack.config.js中加入规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    //webpack.config.js
    const path = require('path');//引入nodejs的path模块
    module.exports = {
      entry: './src/index.js',//设置默认
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
+     module:{
+         rules:[{
+             //里面为匹配的规则
+             test: /\.m?js$/,
+             exclude: /(node_modules|bower_components)/,
+             use: {
+                 loader: 'babel-loader',
+                 options: {
+                     presets: ['@babel/preset-env']
+                 }
+             }
+         }]
+     }
    };

然后再执行打包指令

1
npm run build #或者 yarn build

然后打包后的代码，就没有了let与module.exports了，就可以在不支持es6的浏览器中使用了，如果要是用其他的loader，也可以使用哦

webpack的loader列表

]]> <h2 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h2><p><code>webpack</code> 的配置文件，也就是名为<code>webpack.config.js</code>的文件中，有一个 webpack学习笔记3-初次尝试打包 http://www.meixiaohan.com/2019/08/06/webpack_learn_3/ 2019-08-05T16:00:00.000Z 2020-01-13T10:30:09.098Z 这样就得到了一个安装上了webpack及其脚手架的项目

上一章创建的项目中，我们新建几个文件

1
2
3
4
5
6
7
8
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
+   |- src
+       |- let.js
+       |- get.js
+       |- index.js

其中代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
//let.js中↓↓↓↓↓↓
let name = '小明';
module.exports = name;

//get.js中↓↓↓↓↓↓
module.exports = function(name){
    console.log(name)
};

//index.js中
let name = require('./let.js');
let sayName = require('./get.js');
sayName('大家好,我的名字是'+name)

然后，我们执行打包命令

1
npx webpack

然后我们看到了，文档目录变成了

1
2
3
4
5
6
7
8
9
10
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
    |- src
        |- let.js
        |- get.js
        |- index.js
+   |- dist
+       |- main.js

多出来了一个dist目录，和main.js文件，这个文件，就是被webpack所打包出来的文件，整合了let.js、get.js、index.js的所有js代码。

我们再修改一下目录

1
2
3
4
5
6
7
8
9
10
11
    webpack_learn
    |- node_modules
    |- package.json
    |- yarn.lock
    |- src
        |- let.js
        |- get.js
        |- index.js
    |- dist
        |- main.js
+       |- index.html

新建一个index.html文件，并引入刚打包好的js文件

1
2
3
4
5
6
7
8
9
10
11
//index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="./main.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

将这个文件运行到浏览器中，查看控制台，就可以看到打印了“大家好,我的名字是小明”。

这个地方使用了webpack的npx webpack打包指令

可以这样说，执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件

由表现，我们可以看出，配置项中

1
2
默认入口是/src/index.js
默认出口为/dist/main.js

我们也可以通过package.json来增加命令，来达到更好理解的编译指令，相当于给npm run 建了一个快捷方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//package.json
    {
      "dependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
      },
      "name": "webpack_learn",
      "version": "1.0.0",
      "main": "index.js",
      "devDependencies": {},
      "scripts": {
+       "build":"webpack",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "description": ""
    }

这样，我们就可以使用快捷方式来打包啦

1
npm run build

另外，对webpack传入指令 –mode可以指定开发模式 development为开发模式 production为生产模式，后面会提到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//package.json
    {
      "dependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
      },
      "name": "webpack_learn",
      "version": "1.0.0",
      "main": "index.js",
      "devDependencies": {},
      "scripts": {
        "build":"webpack",
+       "dev":"webpack --mode development",
+       "product":"webpack --mode production",
+        "showColorAndProgress":"webpack --progress --colors",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "description": ""
    }

这样，可以使用

1
2
3
npm run product#运行生产模式
npm run dev#运行开发模式
npm run showColorAndProgress#运行开输出带进度及颜色的编译

备注：

  • 开发环境会包含devDependencies及dependencies中的依赖包
  • 生产环境只会包含dependencies中的依赖包

小技巧：

可以通过webpack-cli的一些参数，来让webpack的编译更有趣一些

  • –progress 显示合并代码进度
  • -p 对打包后的文件进行压缩
  • -d 提供SourceMaps，方便调试，方便排查打包速度瓶颈。
  • –profile 输出性能数据，可以看到每一步的耗时
  • -display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
  • –display-error-details 方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
  • –config：指定一个 Webpack 配置文件的路径；
  • –mode：指定打包环境的 mode，取值为development和production，分别对应着开发环境和生产环境；
  • –json：输mode出 Webpack 打包的结果，可以使用webpack –json > stats.json方式将打包结果输出到指定的文件；
  • –watch, -w：watch 模式打包，监控文件变化之后重新开始打包；
  • –color, –colors/–no-color, –no-colors：控制台输出的内容是否开启颜色；
  • –hot：开启 Hot Module Replacement模式，后面会详细介绍；
]]> <p>这样就得到了一个安装上了webpack及其脚手架的项目</p> <p>上一章创建的项目中，我们新建几个文件</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class=