[TOC] >[success] # 常见的静态资源 ~~~ 1.JS: .js .jsx .coffee .ts(TypeScript 类 C# 语言) 2.CSS: css .less .sass .scss 3.Images:.jpg .png .gif .bmp .svg 4.Fonts: .svg .ttf .eot .woff .woff2 5.模板文件: .ejs .jade .vue【这是在webpack中定义组件的方式,推荐这么用】 ~~~ >[success] # 网页中静态资源过多问题 ~~~ 1. 网页加载速度慢, 因为 我们要发起很多的二次请求; 2. 要处理错综复杂的依赖关系 ~~~ >[success] # 解决资源过多 ~~~ 1. 合并、压缩、精灵图、图片的Base64编码 2. 可以使用requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系; ~~~ >[success] # 什么是 -- webPack * 根据官网图片最简单的理解就是将各种依赖文件最后分为四大块 ![](https://box.kancloud.cn/f4c9bfec51d532130d64309b2882b5be_1129x486.png) ~~~ 1.webpack的理念就是一切皆模块化,把一堆的css文件和js文件放在一个总的 入口文件,通过require引入,剩下的事情webpack会处理,包括所有模块的 前后依赖关系,打包、压缩、合并成一个js文件,公共代码抽离成一个js文 件、某些自己指定的js单独打包,模块可以是css/js/imsge/font等等 2.WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找 到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss, TypeScript等),并将其转换和打包为合适的格式供浏览器使用 ~~~ >[success] # webpack的基本能力:处理依赖、模块化、打包 ~~~ 1.依赖管理:方便引用第三方模块,让模块更容易复用、避免全局注入导致的 冲突、避免重复加载或者加载不必要的模块 2.合并代码:把各个分散的模块集中打包成大文件,减少HTTP的链接的请求 次数,配合uglify.js可以减少、优化代码的体积 3.各种插件:babel把ES6+转化为ES5-,eslint可以检查编译时的各种错误 ~~~ >[success] # 和之前比有了他的好处 ~~~ 以前操作:index.html里面有一大堆的css和js文件,如a.js   b.js     c.js等等 (1)a.js要用到b.js里面的一个函数,则a.js要放在b.js后面 (2)c.js要用到a.js里面的一个函数,则c.js要放在a.js后面 (3)b.js又要用到某个js文件里面的函数,则b.js就要放在其后面 如果有N多个js文件,需要手动处理他们的关系,即容易出错。 使用webPack: 1.webpack的理念就是一切皆模块化,把一堆的css文件和js文件放在一个总 的入口文件,通过require引入,剩下的事情webpack会处理,包括所有模块 的前后依赖关系,打包、压缩、合并成一个js文件,公共代码抽离成一个js 文件、某些自己指定的js单独打包,模块可以是css/js/imsge/font等等。 ~~~ >[success] # 简单的总结 ~~~ 1.以前我们会引入大量的js,css,一些src路径请求,当我们使用webpack后 ,可以把这些全部统一压缩,减少服务器的请求 2.我们可以利用webpack的模块化开发,让前端也可以进行模块化开发 3.随着JavaScript开发变得越来越复杂,依赖项管理也变得越来越麻烦。重构也会受到损害:为了保持负载链的正确顺序,我们要思考新的依赖应该怎么 储存起来 ~~~