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.要处理错综复杂的依赖关系

 

三.如何解决上述2个问题

1.合并、压缩、精灵图、图片的Base64编码

2.可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系

 

四.什么是webpack?

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

 

五.如何完美实现上述的2种解决方案

1.使用Gulp

2.使用Webpack

+借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能

+根据官网的图片介绍webpack打包的过程

+webpack官网

 

六、webpack安装的2种方式

1.运行'npm i webpack -g'全局安装webpack，这样就能在全局使用webpack的命令

2.在项目根目录中运行'npm i webpack --save-dev'安装到项目依赖中