【Webpack】webpack概述

在网页中会引用哪些常见的静态资源？

• JS
  • .js .jsx .coffee .ts(TypeScript)
• CSS
  • .css .less .sass .scss(Sass3 引入的新语法)
• Images
  • .jpg .png .gif .bmp .svg
• 字体文件(Fonts)
  • .svg .ttf .eot .woff .woff2
• 模板文件
  • .ejs .jade .vue(在 webpack 中定义组件的方式)

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

1. 网页加载速度慢，因此我们要发起多次的二次请求
2. 要处理错综复杂的依赖关系

如何解决上述问题？

1. 合并、压缩、精灵图、图片的 base64 编码(一般适用于小图片)
2. 使用 require.js，也可以使用 webpack 解决各个包之间的复杂依赖关系

什么是 webpack？

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

如何完美实现上述两种解决方案？

1. 使用 Gulp，是基于 task 任务的（小：以小的工作点来考虑）
2. 使用 webpack，是基于整个项目进行构建的（大：以整个项目来考虑）

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

webpack 可以做什么事情？

1. webpack 能够处理 JS 文件之间的互相依赖关系；
2. webpack 能够处理 JS 的兼容问题，把高级的浏览器不识别的语法转为低级的浏览器能正常识别的语法；