webpack学习笔记（一）——概述

## 在网页中会引用哪些常见的静态资源？
*Js
  .js .jsx .coffee .ts(TypeScript) 
*Css
  .css .less .sass .scss  
    【.sass以前不好用 .scss是.sass的进阶，现在的sass文件一般都是以.scss命名的】
*Images
  .jpg .png .gif .bmp .svg
*字体文件
  .svg .ttf .eot .woff .woff2
*模板文件
  .ejs .jade .vue【这是在webpack种定义组件的方式,推荐这么用】


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

## 如何解决上述两个问题
  1. 合并【减少二次请求】
     压缩【提高加载速度】
     精灵图
     图片的base64编码【img的src指向base64编码，大图片适用】
  2. 可以适用之前requireJS,也可以适用webpack解决各个包之间的复杂依赖关系

##什么是webpack?
  webpack是前端的一个项目构建工具，他是基于Node.js开发出来的一个前端工具

##如何完美实现上述2种解决方案
  1. 适用Gulp,基于task任务的；【小巧、灵活】
  2. 适用webpack,是基于整个项目进行构建的；
  *借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能
  *根据官网的图片介绍webpack打包的过程
  *（webpack官网）【http://webpack.github.io/】

##webpack安装的两种方式
  1. 运行`npm i weboack -g` 全局安装webpack,这样就能在全局使用webpack的命令
  2. 在项目根目录中运行`npm i webpack --save-dev` 安装到项目依赖中