2021-04-02 14:25
标签：请求 适合 复杂 介绍 gulp 如何 webp web 网页加载 在网页中会引入哪些常见的静态资源？ 标签：请求 适合 复杂 介绍 gulp 如何 webp web 网页加载 原文地址：https://www.cnblogs.com/linm/p/12552817.html
在网页中会引入哪些常见的静态资源？
1.JS（.js .jsx .coffee .ts(TypeScript 类 c# 语言 c sharp 语言)）
2.CSS （.css .less .scss .sass(基本不用了)）
3.Images（.jpg .png .gif .bmp .svg）
4.字体文件(Fonts)（.svg .ttf .eot .woff .woff2）
5.模板文件（.ejs .jade .vue[这是在webpack中定义组件的方式，推荐这么用]）
网页中引入的静态资源多了以后会有什么问题？
1.网页加载数据慢，因为我们要发起很多的二次请求；
2.要处理错综复杂的包依赖关系
如何解决上述两个问题？
1.合并、压缩、精灵图（常用的图片合成一张图片）、图片的base64编码（适合小图片）；
2.可以使用requireJS,也可以使用webpack来解决各个包之间复杂的依赖关系。
##什么是webpack?
webpack是前端的一个项目构建工具，它是基于node.js开发出来的一个前段工具。
##如何完美实现上述的2中方案？
1.使用Gulp,基于task任务
2.使用webpack，基于整个项目进行构建的。
----借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
----根据官网的图片介绍webpack打包的过程；
##webpack安装的两种方式：
1.运行 ‘npm i webpack -g’ 全局安装webpack，这样就能在全局使用webpack的命令；
2.在项目根目录中运行 ‘npm i webpack --save-dev’ 安装到项目依赖中；