带你认识webpack

一、webpack是什么

webpack是一种前端资源构建工具，一个静态模块打包器(module bundler)。在webpack看来，前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

1、首先解释下什么是构建工具

• 比如我们新建个文件引入less外部文件，样式并不会生效，是因为less对于浏览器来讲并不能识别，我们需要借助工具，将less编译为css代码才能被浏览器识别，所以当我们使用这种css预处理器技术去开发样式时，我们就需要工具将less编译成css。

• 在使用js开发一些业务的时候需要用到一些ES6语法或ES7一些更高的语法，比如ES6的module这些语法很可能浏览器不认识，其实一些最新的浏览器对于一些高级语法也不认识，更何况IE8或者更低版本的浏览器就更不认识了，所以这时候我们也需要用工具能够帮我们把浏览器不能识别的语法编译成浏览器能够识别的语法。

• 可能将来还写一些其他东西，这些东西也需要使用另外一个工具继续进行编译处理，那么这一个个小工具在过去需要分别维护就很麻烦，所以前端提出了一个概念叫构建工具

• 构建工具就是找一个大的工具，将这些小工具的功能都包含进来，那么此时我们只需要关心这个大工具如何使用就可以了，这个大工具就能把这一系列小事情全都干好。那么这个大工具就叫构建工具。webpack是构建工具的一种。

2、接下来解释下什么是静态模块打包器

像Vue这些模块化开发，我们在写代码的时候，通常会在一个页面中引入我们整个文件所需要的所有资源如下图：看下index.js，比如我们引入js资源import $ from jquery，将来写样式需要引用样式资源 import './introduce.less'，还要引入其他资源比如图片、字体等，这些资源都要交给构建工具去处理，那构建工具webpack怎么处理呢，首先我们需要告诉webpack打包的一个起点（就是所谓的入口文件），webpack就会以这个入口文件作为起点开始打包，它会将每个依赖都记录好形成一个依赖关系树状图，比如index.js是最外面的结构，下面有两个jq和less依赖，形成这样的关系依赖图，形成好之后它就会分别通过这个依赖图先后顺序依次把这些资源引入进来，引进来形成一个东西我们叫chunk（代码块），将这些代码全部引入进来形成一个代码块，然后对这个代码块进行各项处理（比如说将less编译成css、由js资源编译成浏览器能够识别的js语法等等操作），这些操作我们统一称为打包，打包后将这些处理好的资源输出出去，输出的东西我们叫bundle

总结下大概过程：根据入口文件index.js的依赖关系，将这些资源全部引入进来形成chunk，再根据chunk按不同的资源进行不同的处理，这个处理过程我们叫打包，打包之后输出出去，输出的文件我们叫bundle，其中index.js和jq以及less我们称为模块。

二、webpack可以做的事情

1、可以实现代码转换：比如说将ES6转换为ES5，把less、sass转换为css

2、文件优化：在我们打包过程中压缩代码体积、合并文件等这些都是webpack优化的点

3、代码分割：在开发多页面应用时可能会涉及到公共模块的抽离，可能包括路由的懒加载

4、模块合并：希望把多个模块合并成一个模块，按照功能分类

5、自动刷新：在webpack开发中它会自己帮我们启动一个本地服务来实现代码变更后可以更新我们的页面包括热更新等

6、代码校验：比如校验我们代码是否符合规范

7、自动发布：最后打包完成之后还能实现自动发布的功能

三、需要提前掌握的内容

1、需要准备的环境

Node.js 10版本以上

webpack 4.26版本以上

2、预备技能

基于Node.js知识和npm指令

熟悉ES6语法

更多知识可关注微信公众号：web前端自学平台