## 在網頁中會引用哪些常見的靜態資源？
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. 要處理錯綜復雜的依賴關系

## 如何解決上述兩個問題
1. 合并、壓縮、精靈圖、圖片的Base64編碼
2. 可以使用之前學過的requireJS、也可以使用webpack可以解決各個包之間的復雜依賴關系；

?

## 什么是webpack？

webpack 是前端的一個項目構建工具，它是基于 Node.js 開發出來的一個前端工具；

?

## 如何完美實現上述的2種解決方案
1. 使用Gulp， 是基于 task 任務的；//有一個一個task任務串聯起來，小巧靈活，方便我們做些小的構建，但基于項目去構建的話，就有點力不從心了,從功能點去考慮
2. 使用Webpack， 是基于整個項目進行構建的； //從項目角度去考慮
借助于webpack這個前端自動化構建工具，可以完美實現資源的合并、打包、壓縮、混淆等諸多功能。
根據官網的圖片介紹webpack打包的過程
[webpack官網](https://www.webpackjs.com/)

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的webpack——概念的引入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。