6.1 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中定义组件的方式，推荐这么用）
说明：SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法。
网页中引入的静态资源多了以后有什么问题？
网页加载速度慢， 因为 我们要发起很多的二次请求；
要处理错综复杂的依赖关系；
如何解决上述两个问题？
合并、压缩、精灵图（雪碧图）、图片的Base64编码；
处理依赖关系可以使用requireJS、也可以使用webpack解决各个包之间的复杂依赖关系；
对应的技术方案：
使用Gulp进行压缩合并， 它是基于 task 任务的；
使用Webpack， 它是基于整个项目进行构建的；
说明：并不是所有的图片都适合采用Base64编码，通常只有一些小图片适合这样做。
如果我们的项目比较大的情况下，使用Gulp，会创建许多的task任务，比较麻烦。所以它通常适合一些小的模块构建。
什么是精灵图？
css精灵(CSS sprites)是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中。
什么是webpack?
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
webpack官网地址：。
6.2 webpack-最基本的使用方式webpack安装的两种方式
运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令。
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中。
接下来，我们通过一个隔行变色的示例来演示webpack的基本使用。首先安装webpack，然后新建一个项目，目录如下图所示：
我们经常从网上下载一些第三方的安装包的时候，也经常会看到dist目录和src目录，dist目录是编译后的文件目录，src是源码目录。main.js这是项目的核心文件，全局的配置都在这个文件里面配置，index.html是首页入口文件。
1. 安装webpack：npm i webpack-g
查看webpack版本：
C:\Users\zouqi>webpack -v
4.30.0
2. 安装jquery
npm i jquery -S
index.html代码如下：
<div id="app"> <ul> <li>冯锡范---一剑无血</li> <li>陈近南---平生不见陈近南，便称英雄也枉然</li> <li>胡逸之---百胜刀王</li> <li>九难师太---独臂神尼</li> </ul> </div> <script src="http://www.likecs.com/main.js"></script>