webpack——概念的引入

## 在网页中会引用哪些常见的静态资源？
JS
- .js .jsx .coffee .ts（TypeScript 类 C# 语言）
CSS
- .css .less .sass .scss
Images
- .jpg .png .gif .bmp .svg
字体文件（Fonts）
- .svg .ttf .eot .woff .woff2
模板文件
- .ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

## 网页中引入的静态资源多了以后有什么问题？？？
1. 网页加载速度慢， 因为 我们要发起很多的二次请求；
2. 要处理错综复杂的依赖关系

## 如何解决上述两个问题
1. 合并、压缩、精灵图、图片的Base64编码
2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；

 

## 什么是webpack？

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

 

## 如何完美实现上述的2种解决方案
1. 使用Gulp， 是基于 task 任务的；//有一个一个task任务串联起来，小巧灵活，方便我们做些小的构建，但基于项目去构建的话，就有点力不从心了,从功能点去考虑
2. 使用Webpack， 是基于整个项目进行构建的； //从项目角度去考虑
借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
根据官网的图片介绍webpack打包的过程
[webpack官网](https://www.webpackjs.com/)

 

更多专业前端知识，请上 【猿2048】www.mk2048.com