1. 为什么需要Webpack

总结一句话: 前端发展的需要.

只要大家明白前端的发展脉络,自然就知道为什么Webpack在现今大行其道.

我们可以简单看一下前端的发展

1. 随着前端需要处理的内容越来越多,同时也为了解决JS全局标识符污染问题,模块化开发成为了主流,但是浏览器却不能识别模块化.
2. 随着新时代语法的更新,让开发更有效率,维护更方便.但是依然会有大量的新语法在很多浏览器上不太支持.开发和生成出现了问题,如ES6的语法
3. 为了提升开发效率,出现了大量的预编译语言,如less,styls,但是这些语言不能被浏览器直接识别.那么就需要生产时提前编译,如果项目中用到了很多预编译语言,那么所有预编译语言的编译就是一个繁琐的工作
4. 以前对于小图片请求性能的考虑,大多是做成精灵图,但是就算做成精灵图也是需要一次请求,有的时候就是处于性能的考虑需要将图片编程base64的编码, 因此也是需要一个编码的工具
5. 甚至包括框架的出现和大量的使用,需要我们在开发时能够实时了解开发结果.

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

所以需要Webpack

那么有人可能会问,同等类型的工具只有Webpack吗? 答案当然不是,那么我们就来简单了解其他几个构建工具, 了解一下各自的优劣时,明白为什么使用Webpack会比其他构建工具使用多的原因

2. 其他构建工具Grunt/Gulp的了解

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

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

简单的说:就是你定义了很多任务,让Grunt/Gulp自动去执行这些任务

2.1 什么是用到Grunt/Gulp呢?

1. 项目依赖非常简单,甚至都没有使用模块化
2. 只需要进行一些简单合并,压缩时就可以使用

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

2.2 对比:

1. Grunt/Gulp更强调流程自动化,模块化不是核心
2. Webpack更强调模块化开发管理,而文件的压缩合并,预处理功能都是附带的
3. 不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

3.Webpack的优势

1. 现在主流的开发模式为“模块化+新语言+新框架“，而webpack可以提供一站式的解决方案。
2. Webpack有良好的生态链和维护团队，能够提供良好的开发体验并保证质量。
3. Webpack被全世界大量的Web开发者使用和验证，能找到各个层面所需的教程和经验分享。

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

4. Webpack的 概念

webpack是什么?

官网定义:

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

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

4.1 先来理解模块打包器

简而言之:

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

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

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

注意点:

我们以前学习模块化的时候,学的最多的是js模块化,无论是commonJS规范,还是ESModule都是JS模块化,那么webpack模块化打包工具是不是是用来处理JS模块化的呢?

这么跟你说吧:

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

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

需要需要处理像css,img这样非js,JSON文件的打包,就需要使用到Loader,

至于什么是Loader我们之后再将.

4.2 静态资源处理

官网不是说Webpack是静态模块打包器吗? 模块打包器,我们现在理解了,那么静态又该作何解释呢?

这就要讲Webpack处理方向

1. 维护模块之前的依赖,Webpack会将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。
2. 静态资源处理(性能优化)：Webpack可以通过loader或者插件来对我们的静态资源进行优化，主要体现在对代码压缩，图片压缩，文件处理，css预处理等。
3. 提升工作效率:Webpack 有一系列的辅助开发工具来提高我们的开发效率。本地服务中的热加载、less,sass的使用、开发环境到生产环境的自定义配置等。

因此通过Webpack主要处理方向就能理解静态的意义,就是为了提升性能会对静态资源进行处理.

关于webpack介绍先了解到这里, 我们接下来看看Webpack的安装与使用

5. Webpack安装

5.1 Webpack安装

全局安装

$ npm install -g webpack webpack-cli

局部安装

注意局部安装 将webpack安装到开发依赖中

$ npm install webpack webpack-cli --save-dev

5.2 webpack和webpack-cli介绍

webpack3中webpack-cli是合在webpack中。所以在安装webpack3版本的使用,

只需要安装下面的命令就可以了

## webpack3 安装方式
$ npm install -g webpack

webpack4.0 以后，执行方式就发生了改变，不再是 webpack 一波流，而是多了一个 webpack-cli。所以安装时两个都需要安装

那么两者两者之间什么关系?

webpack是webpack的核心代码

webpack-cli是让我们可以在控制台使用webpack命令

6. webpack 核心概念的理解

6.1 核心概念说明:

1. Entry: 入口指示, 告诉Webpack以哪个文件作为入口起点开始分析构建内部依赖图,并开始打包.
2. Output: 输出指示,告诉Webpack打包好的资源bundles输出到哪里去,以及如何命名输出的文件
3. Loader: Webpack核心只能处理JavaScript资源文件, 非JS文件Webpack只能交给Loader处理
4. Plugin: 插件,可以用于执行范围更广的任务.插件的范围包括从打包优化,压缩,到重新定义环境变量
5. Mode. 模式, 运用告诉Webpack在普通模式下使用不同的配置,主要有开发模式和生成模式

对于核心的概念现有一个初步的认识,后面会大量的讲解和使用

6.2 Model 模式的了解

Mode模式用于指定Webpack打包使用相应模式的配置

简而言之,

1. 开发环境development,为了本来调试不会对打包后的代码进行压缩
2. 生产环境production,为了上线的性能,会将打包后的代码进行压缩

7. webpack的简单使用

使用Webpack对模块化文件进行打包

7.1 定义模块

commonjs模块.png

7.2 通过webpack打包

webpack打包.png

7.3 打包后的文件

引入打包后文件.png

7.4 显示结果

显示结果.png