在網頁中會引入哪些常見的靜態資源？
1.JS（.js .jsx .coffee .ts(TypeScript 類 c# 語言 c sharp 語言)）
2.CSS （.css .less .scss .sass(基本不用了)）
3.Images（.jpg .png .gif .bmp .svg）
4.字體文件(Fonts)（.svg .ttf .eot .woff .woff2）
5.模板文件（.ejs .jade .vue[這是在webpack中定義組件的方式，推薦這么用]）
網頁中引入的靜態資源多了以后會有什么問題？
1.網頁加載數據慢，因為我們要發起很多的二次請求；
2.要處理錯綜復雜的包依賴關系
如何解決上述兩個問題？
1.合並、壓縮、精靈圖（常用的圖片合成一張圖片）、圖片的base64編碼（適合小圖片）；
2.可以使用requireJS,也可以使用webpack來解決各個包之間復雜的依賴關系。
##什么是webpack?
webpack是前端的一個項目構建工具，它是基於node.js開發出來的一個前段工具。
##如何完美實現上述的2中方案？
1.使用Gulp,基於task任務
2.使用webpack，基於整個項目進行構建的。
----借助於webpack這個前端自動化構建工具，可以完美實現資源的合並、打包、壓縮、混淆等諸多功能。
----根據官網的圖片介紹webpack打包的過程；
##webpack安裝的兩種方式：
1.運行 ‘npm i webpack -g’ 全局安裝webpack，這樣就能在全局使用webpack的命令；
2.在項目根目錄中運行 ‘npm i webpack --save-dev’ 安裝到項目依賴中；