webpack学习笔记1-简介 | IT梅的前端经验分享

今天起，准备学习webpack了，以此作为一个学习笔记，记录自己的学习过程，也方便日后遇到不懂得，回来查一下

经过webpack官网显示，webpack是一个模块化的打包工具，那么

问：什么是模块化？

答：模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程，有多种属性，分别反映其内部特性。–面向百度编程的结果

至于模块化有什么好处，这个东西，我们可以从日常生活中，找一些例子，比如，作为一个it从业者，都是需要pc电脑来完成开发的，一个电脑里面就有很多模块化的概念：

显示屏
键盘
鼠标
cpu
主板
显卡
内存条
…

这些东西，每个零件，就是一个模块，彼此之间，并不关心其内部是如何运行的，其中某一个零件坏掉，就换这一个零件即可。

比如，一个数组的排序方法

let arr = [1,3,5,7,8,9,5,4,3];
function sortFunc(arr){
    return arr.sort(()=>{
        return -1
    })
}
sortFunc(arr);//[9, 8, 7, 5, 5, 4, 3, 3, 1]

sortFunc这个方法就为我们完成了排序的功能，sortFunc就是一个模块。我们还可以将sortFunc中换成冒泡排序

let arr = [1,3,5,7,8,9,5,4,3];
function sortFunc(arr){
    let s;
    for (let i =0;i<arr.length;i++) { 
      for (let j = 0; j < arr.length; j++) {
            if (arr[j] < arr[j + 1]){ 
                s = arr[j]; 
                arr[j]=arr[j+1]; 
                arr[j+1]=s; 
            } 
       }
    }
     return arr;
}
sortFunc(arr);//[9, 8, 7, 5, 5, 4, 3, 3, 1]

对于复用代码的人来讲，我们不关心sortFunc中做了什么，sortFunc是类似于一个模块，接收入参arr，排序后，再 return 这个arr。

当这种模块越来越多的时候，管理起来，比较困难，就不得不提起前端的工程化了，那么页产生了灵魂拷问

问：什么是前端工程化?

答：随着多年的前端技术发展，出现了一系列的组件化，模块化等概念，他们出现的意义都是，提升开发人员的开发效率，避免重复造轮子，让开发人员能够在更短的时间内，开发出公司需要的产品。所以，一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。

再举个例子：在很多年前，使用原生js为一个button按钮，增加一个点击事件，弹出1，写法如下

1
2
3

document.getElementById('button').onclick = function(){
    
}

我们可以对选择器进行封装(仅作为示意使用)

1
2
3

let $=function(domId){
    return document.getElementById(domId)
}

此后，代码变成为了

1
2
3

$('button').onclick = function(){
    
}

这其中选择器$的封装也是一个模块，让后续的选择器，可以少写很多代码

模块中，最常见的是 Nodejs 的 NPM 包，每个模块可能是最小甚至是最优的代码组合

如果没有模块，那么可能出现的开发流程就是，

我需要数组排序
我找找之前那个项目写过
复制一份代码过来
粘贴到现在开发的项目中，然后使用

这时候，出现了什么问题，

本身这个方法我已经写过了，复制过来后，原来的代码没有复用，(增加了查找及开发的时间：有模块的话，引入一下就行)
未来的某一天，我发现一个新的排序算法，比我之前写的那个效率更高！我要把之前项目都换掉(增加了维护成本：改模块的话，几行代码就行)

但是，如果我们封装的方法多了，模块多了，开发人员多了，大家写法不一，以及开发社区化的角度来看，大多数人的写法是不统一的，为了让大家能够使用自己风格的写法，又可以打成一个一个的小包来让大家通用，于是出现了webpack

webpack的目的就是这样，为了前端工程化，提升开发者的效率（loader）

综上所述，webpack是一个前端工程化的，提升开发效率的模块打包器，可以让更多的人来写小小的包，使未来可能用到这个包的人或者自己，直接使用这个包，避免再重复的浪费时间。

提到webpack，最容易想到，也是比较火的，Grunt、Gulp，那么webpack和这两个之间，有什么区别呢？

像 Grunt、Gulp 这类构建工具，打包的思路是：遍历源文件→匹配规则→打包，这个过程中做不到按需加载，即对于打包起来的资源，到底页面用不用，打包过程中是不关心的。

webpack 跟其他构建工具本质上不同之处在于：webpack 是从入口文件开始，经过模块依赖加载、分析和打包三个流程完成项目的构建。在加载、分析和打包的三个过程中，可以针对性的做一些解决方案，比如code split（拆分公共代码等）。

webpack还可以解决日常开发中的一些问题，例如

ES6/ES7的代码，在某些浏览器还不兼容
出现了一种typeScript的新语言
css需要补足前缀，做预处理/后处理
最后写完代码了，要对代码进行加密、压缩
…

这些问题，都可以使用webpack，来引入已有的模块，来轻松构建啦

补充：

模块化都是符合CommonJS规范的。

CommonJS规范简单说明

使用require()导入其他模块
使用exports导出本模块需要导出的内容