开发者学堂课程【前端自动化构建工具 Webpack：为什么要使用 webpack】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8209
为什么要使用 webpack
目录：
一、在网页中会引用哪些常见的静态资源?
二、网页中引入的静态资源多了以后有什么问题？
三、如何解决上述两个问题
四、什么是webpack?
五、如何完美实现上述的2种解决方案
一、在网页中会引用哪些常见的静态资源?
开始 webpack 的学习
JS
还有.js .jsx .coffee .ts ( TypeScript类C#语言)
coffee TypeScript都是中间语言用
coffee TypeScript可以写出类似于JS的代码但是不能直接在预览器运行
如果想运行需要有编译器把coffee TypeScript这种语言编译成JS然后才能正常运行
.coffee .ts ( TypeScript)都是JS其中的一种需要编译才能正常运行
CSS
.css .less例如：html{
font-size:12px;
p{
color:red;
.sass .scss 例如：body
.sass 基本没有太大用处
再写CSS的文件时要以.scss作为文件的后缀名字
.sass .scss 的不同
在.sass 没有更新之前
body
color:red
font-size: 12px
更新.scss之后的用法和.less的用法基本一样
html{
font-size:12px;
pl
colorred;
}
现在的 .less和 .scss用法差不多只是语法不同
可以看看sass的官网，看看语法
color:red
font-size: 12px
Images
常见图片后缀名.jpg .png .gif .bmp .svg
字体文件( Fonts )
.svg .ttf .eot .woff .woff2
模板文件
Moudle文件.ejs例如： html
head lbodydiv
.jade .vue【这是在webpack中定义组件的方式，推荐这么用】
.jade不好用
正常是
而用.jade是
html
Head
Body
div
即将学习的 .vue
用webpack结合.vue文件每一个文件都是一个图片，更容易理解图片的开发后续会讲.vue
二、网页中引入的静态资源多了以后有什么问题？
1.网页加载速度慢，因为要发起很多的二次请求;
一个网页想展现出来第一步输入urd 接下来预览器主动去请服务器去拿页面
服务器处理完毕之后把页面的 htlm 代码访问给预览器
所以这个时候只能有 htlm 的代码
发出二次请求又一个标签再发出一个请求又一个样式标签再发出一个请求图片也是这样一个方式
在整个个过程中一个网页真正想要显示出来，不止发出一次请求有很多的步骤，就会发出很多二次请求，网速慢网页加载速度就慢
再点发表文章的时候，点的时候会出来相应的菜单，出来的菜单就属于 js 行为，如果想正常的生效就要引用，但是还不可以
因为引用需要 jyquire 所以在引入之前需要导入 jyquire
所以在网页中要处理每个包和每个包的依赖关系
2.要处理错综复杂的依赖关系
三、如何解决上述两个问题
对于 JS CSS 处理方法如下：
合并、压缩、精灵图、图片的 Base64 编码
图片是默认有ssc属性指向资源
现在可以把ssc属性不指向真正的地址让其指向 Base64 编码一个字符串
这样会使htlm代码一起下来客户端
合并 JS CSS压缩 Images 图片真正的地址指向一个 Base64 编码
这样图片就会随着htlm代码一样在第一请求的时候就会拿到代码，避免二次请求，相对于精灵图来说图片的 Base64编码更佳的极致，精灵图至少发一次请求，Base64编码只发一次请求
但是图片的 Base64 编码不适合所有图片只适合一些小的图片
2.可以使用之前学过的 requireJS、也可以使用 webpack 可以解决各个包之间的复杂依赖关系;
四、什么是 webpack?
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具;
没有 Node.js 就不能安装 webpack 这是其中的特点
五、如何完美实现上述的2种解决方案
1．使用 Gulp，是基于 task 任务;
2使用 Webpack ，是基于整个项目进行构建;
如果项目是地球，Gulp 就是珠穆朗玛峰
在北京是看不到珠穆朗玛峰，只能辐射周边的区域
如果建一个 task 任务，就相当于珠穆朗玛峰只能处理周边的区域
处理其他的就是要新建任务关联起来
如果一个项目非常的大用Gulp构建需要建很多的 Gulp 小任务
这些小任务就相当于珠穆朗玛峰，在地球上这么多珠穆朗玛峰也能把地球构建起来
优点：小巧，灵活，方便。
基于项目的构建就力不从心。
Webpack 不是地球上的珠穆朗玛峰是卫星，所以 webpack 是基于项目构建的，站在更宏观的角度对待项目，这样会很方便的构建整个项目
各自的出发点不同
Webpack 是整个项目的角度去考虑问题
Gulp 是站在小小的工程点去考虑
没有谁优谁劣只有更适合做什么项目
借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。根据官网的图片介绍 webpack 打包的过程
打开 webpack 官网
看一看入门的 webpack
相同的 js 合并在一起
解决依赖关系
减少了不必要的网络请求
提高网络使用效率
经过千辛万苦进入了 webpack
这是在讲用中间的方块可以进行构建
把一个项目拆分成许多的小模块相互间有关系而且这个方块还会动
bundle your styles
bundle your assets 这些都可以进行打包
左侧可以想象成未打包的项目结构
这里有JS相互依赖的关系比较复杂，还有一些关于图片，左侧的关系非常多
经过 webpack 的处理基本上没有错通复杂的依赖关系数量也变少了
把相同的 JS，压缩表合在一起
首先帮助解决依赖关系，其次减少了不必要的网络请求提高效率
如图：
