带你快速了解WebPack神器

Webpack认识

1. 为什么需要Webpack

前端发展的需要.

我们简单了解一下前端的发展史

随着前端需要处理的内容越来越多,同时也为了解决JS全局标识符污染问题,模块化开发成为了主流,但是浏览器却不能识别模块化.

随着新时代语法的更新,让开发更有效率,维护更方便.但是依然会有大量的新语法在很多浏览器上不太支持.开发和生成出现了问题,如ES6的语法

为了提升开发效率,出现了大量的预编译语言,如less,styls,但是这些语言不能被浏览器直接识别.那么就需要生产时提前编译,如果项目中用到了很多预编译语言,那么所有预编译语言的编译就是一个繁琐的工作

以前对于小图片请求性能的考虑,大多是做成精灵图,但是就算做成精灵图也是需要一次请求,有的时候就是处于性能的考虑需要将图片编程base64的编码, 因此也是需要一个编码的工具

甚至包括框架的出现和大量的使用,需要我们在开发时能够实时了解开发结果.

等等,就不举例了, 随着技术的发展,我们就需要一个工具帮我们提升代码的开发效率, 优化代码的编译. 将浏览器不能识别的语法自动处理为浏览器能够识别的语法.

此时Webpack就应运而生了

那么有人可能就会有疑问,相同类型的工具只有Webpack吗? 答案是NO,那么我们就来简单了解其他几个构建工具, 了解一下各自的优劣时,你自然而然的就会明白为什么使用Webpack会比其他构建工具被利用的更广泛

2. Gulp是一个基于流的自动化构建工具.

Grunt是一个任务执行者，有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化地执行依赖的任务，每个任务的具体执行代码和依赖关系都写在配置文件Gruntfile.js里，

浅显的解释:就是你定义了很多任务,让Grunt/Gulp自动去执行这些任务

2.1 什么是用到Grunt/Gulp呢?

项目依赖非常简单,甚至都没有使用模块化

只需要进行一些简单合并,压缩时就可以使用

项目依赖关系比较强,使用模块化开发方式, 就需要强大的Webpack了

2.2 对比:

Grunt/Gulp更强调流程自动化,模块化不是核心

Webpack更强调模块化开发管理,而文件的压缩合并,预处理功能都是附带的

不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

3.Webpack的优势

现在主流的开发模式为“模块化+新语言+新框架“，而webpack可以提供一站式的解决方案。

Webpack有良好的生态链和维护团队，能够提供良好的开发体验并保证质量。

Webpack被全世界大量的Web开发者使用和验证，能找到各个层面所需的教程和经验分享。

这些优势也是很多人选择Webpack的原因

4. Webpack的 概念

webpack是什么?

官网定义:

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

4.1 先来理解模块打包器

随着开发的复杂度越来越高, 以前的开发方式已经难以满足我们的需要,为了更快更好的开发程序,会大量的使用到模块化开发, , 以及一些优秀的预处理器(如less),

但是问题来了,这些模块化好工具,浏览器不能够直接识别, 所以我们就需要将开发的的代码转为大部分浏览器能识别的代码, 所以我们需要一个工具,将我们的模块进行处理, 这个处理的过程就是打包.

所以webpack最简单的解释: 就是前端模块化打包工具

在Webpack眼里,前端所有的资源文件,诸如(js/json/css/img/less/scss/...)等等文件都会被作为模块处理.

但是Webpack核心就只是用来处理JS,JSON类型文件的打包.

需要处理诸如css,img等非js,JSON文件的打包,咱们就要使用到Loader,

什么是Loader?我们之后有空再讲一下.

4.2 静态资源处理

ES6多模块Module<打包前>

官网上的概述Webpack是静态模块打包器吗? 从上面的描述我们知道了模块打包器,但是静态又该作何解释呢?

接下来就需要了解Webpack处理方向

维护模块之前的依赖,Webpack会将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

静态资源处理(性能优化)：Webpack可以通过loader或者插件来对我们的静态资源进行优化，主要体现在对代码压缩，图片压缩，文件处理，css预处理等。

提升工作效率:Webpack 有一系列的辅助开发工具来提高我们的开发效率。本地服务中的热加载、less,sass的使用、开发环境到生产环境的自定义配置等。

因此通过Webpack主要处理方向就能理解静态的意义,