## 在網頁中會引用哪些常見的靜態資源？
+ js
- .js .jsx .coffee .ts（typescript 類 c# 語言）
+ 字型檔案（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官網](
webpack的常識概念
它的優勢 遞迴解析依賴，支援支援es module規範 commonjs amd規範。支援 分割。loader css loader style loader less loader sass loader ts loader 等，用來將less ts等檔案轉換成webpack可以打包的檔案 模組熱...
webpack核心概念
1.manifest webpack中runtime和manifest主要用於管理所有模組的互動，主要是用於連線模組化應用程式的所有代 碼。runtime包含 在模組互動時，連線模組所需的載入和解析邏輯，包括瀏覽器中已載入模組的連線以及懶載入模組的執行連線。管理模組互動的流程 當編譯器 compil...
webpack 核心概念
核心概念 entry 打包的入口 output 打包的輸出 loaders webpack 處理js 之外的東西，就是使用的loaders plugins webpack 其它功能 比如壓縮 分割 等就是通過plugins 來完成的 entry 的入口 某段 的入口，這個入口會說明這段 所有的依賴 ...