在網頁中會引用哪些常見的靜態資源？
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中定義元件的方式，推薦這麼用】
網頁中引入的靜態資源多了以後有什麼問題？？？
網頁載入速度慢， 因為 我們要發起很多的二次請求；
要處理錯綜複雜的依賴關係

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

什麼是webpack?
webpack 是前端的一個專案構建工具，它是基於 Node.js 開發出來的一個前端工具；
如何完美實現上述的2種解決方案
使用Gulp， 是基於 task 任務的；
使用Webpack， 是基於整個專案進行構建的；

藉助於webpack這個前端自動化構建工具，可以完美實現資源的合併、打包、壓縮、混淆等諸多功能。
根據官網的圖片介紹webpack打包的過程
webpack官網

webpack安裝的兩種方式
執行npm i webpack -g全域性安裝webpack，這樣就能在全域性使用webpack的命令
在專案根目錄中執行npm i webpack --save-dev安裝到專案依賴中

初步使用webpack打包構建列表隔行變色案例
執行npm init初始化專案，使用npm管理專案中的依賴包
建立專案基本的目錄結構
使用cnpm i jquery --save安裝jquery類庫
建立main.js並書寫各行變色的程式碼邏輯：

// 匯入jquery類庫
    import $ from 'jquery'

    // 設定偶數行背景色，索引從0開始，0是偶數
    $('#list li:even').css('backgroundColor','lightblue');
    // 設定奇數行背景色
    $('#list li:odd').css('backgroundColor','pink');
 

直接在頁面上引用main.js會報錯，因為瀏覽器不認識import這種高階的JS語法，需要使用webpack進行處理，webpack預設會把這種高階的語法轉換為低階的瀏覽器能識別的語法；
執行webpack 入口檔案路徑 輸出檔案路徑對main.js進行處理：

webpack src/js/main.js dist/bundle.js
使用webpack的配置檔案簡化打包時候的命令
在專案根目錄中建立webpack.config.js
由於執行webpack命令的時候，webpack需要指定入口檔案和輸出檔案的路徑，所以，我們需要在webpack.config.js中配置這兩個路徑：

// 匯入處理路徑的模組
   var path = require('path');

   // 匯出一個配置物件，將來webpack在啟動的時候，會預設來查詢webpack.config.js，並讀取這個檔案中匯出的配置物件，來進行打包處理
   module.exports = {
       entry: path.resolve(__dirname, 'src/js/main.js'), // 專案入口檔案
       output: { // 配置輸出選項
           path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
           filename: 'bundle.js' // 配置輸出的檔名
       }
   }