webpack使用笔记

## 在网页中会引用到那些静态资源

+JS　

- .js .jsx .coffee .ts(TypeScript， 类似于C#)

+CSS

-   .css .less .sass .scss

+Image

- .jpg .png .gif .bmp .svg

+字体文件

- .svg .ttf  .eot .weff .woff2

+模板文件

- .ejs .jade .vue[这里在webpack中定义组件的方式]

 

## 网页中引入的静态资源多了以后有什么问题？

1. 网页加载速度慢，因为我们要发起很多二次请求；

2. 处理错综复杂的依赖关系

## 如何解决上述两个问题

1. 合并、压缩、精灵图片、图片的base64编码（小图片）

2. 可以使用requireJS、也可以使用webpack可以解决我们的各个包复杂的依赖关系

## 什么是webpack？

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

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

1. 使用gulp， 是基于task任务的

2. 使用webpack， 是基于整个项目进行构建的；

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

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

+【webpack官网】v4.webpack.js.org

## webpack安装的两种方式

1、运行`npm i webpack -g` 全局安装webpack, 这样就能在全局使用webpack命令。

2、在项目根目录中运行 `npm i webpack --save` 安装到项目依赖中

## 初步使用webpack打包构建列表隔行变色案例