在網頁中會引用哪些常見的靜態資源？

• 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 任務的；
2. 使用Webpack， 是基於整個專案進行構建的；

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

webpack安裝的兩種方式

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

初步使用webpack打包構建列表隔行變色案例

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

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

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

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

webpack src/js/main.js dist/bundle.js

使用webpack的配置檔案簡化打包時候的命令

1. 在專案根目錄中建立webpack.config.js
2. 由於執行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' // 配置輸出的檔名
        }
    }

實現webpack的實時打包構建

1. 由於每次重新修改程式碼之後，都需要手動執行webpack打包的命令，比較麻煩，所以使用webpack-dev-server來實現程式碼實時打包編譯，當修改程式碼之後，會自動進行打包構建。
2. 執行cnpm i webpack-dev-server --save-dev安裝到開發依賴
3. 安裝完成之後，在命令列直接執行webpack-dev-server來進行打包，發現報錯，此時需要藉助於package.json檔案中的指令，來進行執行webpack-dev-server命令，在scripts節點下新增"dev": "webpack-dev-server"指令，發現可以進行實時打包，但是dist目錄下並沒有生成bundle.js檔案，這是因為webpack-dev-server將打包好的檔案放在了記憶體中

• 把bundle.js放在記憶體中的好處是：由於需要實時打包編譯，所以放在記憶體中速度會非常快
• 這個時候訪問webpack-dev-server啟動的http://localhost:8080/網站，發現是一個資料夾的面板，需要點選到src目錄下，才能開啟我們的index首頁，此時引用不到bundle.js檔案，需要修改index.html中script的src屬性為:<script src="../bundle.js"></script>
• 為了能在訪問http://localhost:8080/的時候直接訪問到index首頁，可以使用--contentBase src指令來修改dev指令，指定啟動的根目錄：

"dev": "webpack-dev-server --contentBase src"

同時修改index頁面中script的src屬性為<script src="bundle.js"></script>

使用html-webpack-plugin外掛配置啟動頁面

由於使用--contentBase指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標籤的src屬性，所以推薦大家使用html-webpack-plugin外掛配置啟動頁面.

1. 執行cnpm i html-webpack-plugin --save-dev安裝到開發依賴
2. 修改webpack.config.js配置檔案如下：

    // 匯入處理路徑的模組
    var path = require('path');
    // 匯入自動生成HTMl檔案的外掛
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 專案入口檔案
        output: { // 配置輸出選項
            path: path.resolve(__dirname, 'dist'), // 配置輸出的路徑
            filename: 'bundle.js' // 配置輸出的檔名
        },
        plugins:[ // 新增plugins節點配置外掛
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路徑
                filename:'index.html'//自動生成的HTML檔案的名稱
            })
        ]
    }

3. 修改package.json中script節點中的dev指令如下：

"dev": "webpack-dev-server"

4. 將index.html中script標籤註釋掉，因為html-webpack-plugin外掛會自動把bundle.js注入到index.html頁面中！

實現自動開啟瀏覽器、熱更新和配置瀏覽器的預設埠號

注意：熱更新在JS中表現的不明顯，可以從一會兒要講到的CSS身上進行介紹說明！

方式1：

• 修改package.json的script節點如下，其中--open表示自動開啟瀏覽器，--port 4321表示開啟的埠號為4321，--hot表示啟用瀏覽器熱更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

方式2：

1. 修改webpack.config.js檔案，新增devServer節點如下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

2. 在頭部引入webpack模組：

var webpack = require('webpack');

3. 在plugins節點下新增：

new webpack.HotModuleReplacementPlugin()

使用webpack打包css檔案

1. 執行cnpm i style-loader css-loader --save-dev
2. 修改webpack.config.js這個配置檔案：

module: { // 用來配置第三方loader模組的
        rules: [ // 檔案的匹配規則
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//處理css檔案的規則
        ]
    }

3. 注意：use表示使用哪些模組來處理test所匹配到的檔案；use中相關loader模組的呼叫順序是從後向前呼叫的；

使用webpack打包less檔案

1. 執行cnpm i less-loader less -D
2. 修改webpack.config.js這個配置檔案：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用webpack打包sass檔案

1. 執行cnpm i sass-loader node-sass --save-dev
2. 在webpack.config.js中新增處理sass檔案的loader模組：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用webpack處理css中的路徑

1. 執行cnpm i url-loader file-loader --save-dev
2. 在webpack.config.js中新增處理url路徑的loader模組：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

3. 可以通過limit指定進行base64編碼的圖片大小；只有小於指定位元組（byte）的圖片才會進行base64編碼：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

• webpack.config.js

const path = require('path')
// 啟用熱更新的 第2步
const webpack = require('webpack')
// 匯入在記憶體中生成 HTML 頁面的 外掛
// 只要是外掛，都一定要 放到 plugins 節點中去
// 這個外掛的兩個作用：
//  1. 自動在記憶體中根據指定頁面生成一個記憶體的頁面
//  2. 自動，把打包好的 bundle.js 追加到頁面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

// 這個配置檔案，起始就是一個 JS 檔案，通過 Node 中的模組操作，向外暴露了一個 配置物件
module.exports = {
  // 大家已經學會了舉一反4， 大家覺得，在配置檔案中，需要手動指定 入口 和 出口
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪個檔案
  output: { // 輸出檔案相關的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的檔案，輸出到哪個目錄中去
    filename: 'bundle.js' // 這是指定 輸出的檔案的名稱
  },
  devServer: { // 這是配置 dev-server 命令引數的第二種形式，相對來說，這種方式麻煩一些
    //  --open --port 3000 --contentBase src --hot
    open: true, // 自動開啟瀏覽器
    port: 3000, // 設定啟動時候的執行埠
    contentBase: 'src', // 指定託管的根目錄
    hot: true // 啟用熱更新 的 第1步
  },
  plugins: [ // 配置外掛的節點
    new webpack.HotModuleReplacementPlugin(), // new 一個熱更新的 模組物件， 這是 啟用熱更新的第 3 步
    new htmlWebpackPlugin({ // 建立一個 在記憶體中 生成 HTML  頁面的外掛
      template: path.join(__dirname, './src/index.html'), // 指定 模板頁面，將來會根據指定的頁面路徑，去生成記憶體中的 頁面
      filename: 'index.html' // 指定生成的頁面的名稱
    })
  ],
  module: { // 這個節點，用於配置 所有 第三方模組 載入器 
    rules: [ // 所有第三方模組的 匹配規則
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置處理 .css 檔案的第三方loader 規則
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置處理 .less 檔案的第三方 loader 規則
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置處理 .scss 檔案的 第三方 loader 規則
    ]
  }
}

// 當我們在 控制檯，直接輸入 webpack 命令執行的時候，webpack 做了以下幾步：
//  1. 首先，webpack 發現，我們並沒有通過命令的形式，給它指定入口和出口
//  2. webpack 就會去 專案的 根目錄中，查詢一個叫做 `webpack.config.js` 的配置檔案
//  3. 當找到配置檔案後，webpack 會去解析執行這個 配置檔案，當解析執行完配置檔案後，就得到了 配置檔案中，匯出的配置物件
//  4. 當 webpack 拿到 配置物件後，就拿到了 配置物件中，指定的 入口  和 出口，然後進行打包構建；

• main.js

// 這是 main.js 是我們專案的JS入口檔案

// 1. 匯入 Jquery
// import *** from *** 是ES6中匯入模組的方式
// 由於 ES6的程式碼，太高階了，瀏覽器解析不了，所以，這一行執行會報錯
import $ from 'jquery'
// const $ = require('jquery')

// 使用 import 語法，匯入 CSS樣式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 注意： webpack, 預設只能打包處理 JS 型別的檔案，無法處理 其它的非 JS 型別的檔案；
// 如果要處理 非JS型別的檔案，我們需要手動安裝一些 合適 第三方 loader 載入器；
// 1. 如果想要打包處理 css 檔案，需要安裝 cnpm i style-loader css-loader -D
// 2. 開啟 webpack.config.js 這個配置檔案，在 裡面，新增一個 配置節點，叫做 module, 它是一個物件；在 這個 module 物件身上，有個 rules 屬性，這個 rules 屬性是個 陣列；這個陣列中，存放了，所有第三方檔案的 匹配和 處理規則；


// 注意： webpack 處理第三方檔案型別的過程：
// 1. 發現這個 要處理的檔案不是JS檔案，然後就去 配置檔案中，查詢有沒有對應的第三方 loader 規則
// 2. 如果能找到對應的規則， 就會呼叫 對應的 loader 處理 這種檔案型別；
// 3. 在呼叫loader 的時候，是從後往前呼叫的；
// 4. 當最後的一個 loader 呼叫完畢，會把 處理的結果，直接交給 webpack 進行 打包合併，最終輸出到  bundle.js 中去




$(function () {
  $('li:odd').css('backgroundColor', 'yellow')
  $('li:even').css('backgroundColor', function () {
    return '#' + 'D97634'
  })
})


// 經過剛才的演示，Webpack 可以做什麼事情？？？
// 1. webpack 能夠處理 JS 檔案的互相依賴關係；
// 2. webpack 能夠處理JS的相容問題，把 高階的、瀏覽器不是別的語法，轉為 低階的，瀏覽器能正常識別的語法

// 剛才執行的命令格式：    webpack  要打包的檔案的路徑  打包好的輸出檔案的路徑



// 使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能
// 1. 執行 npm i webpack-dev-server -D 把這個工具安裝到專案的本地開發依賴
// 2. 安裝完畢後，這個 工具的用法， 和 webpack 命令的用法，完全一樣
// 3. 由於，我們是在專案中，本地安裝的 webpack-dev-server ， 所以，無法把它當作 指令碼命令，在powershell 終端中直接執行；（只有那些 安裝到 全域性 -g 的工具，才能在 終端中正常執行）
// 4. 注意： webpack-dev-server 這個工具，如果想要正常執行，要求，在本地專案中，必須安裝 webpack
// 5. webpack-dev-server 幫我們打包生成的 bundle.js 檔案，並沒有存放到 實際的 物理磁碟上；而是，直接託管到了 電腦的記憶體中，所以，我們在 專案根目錄中，根本找不到 這個打包好的 bundle.js;
// 6. 我們可以認為， webpack-dev-server 把打包好的 檔案，以一種虛擬的形式，託管到了 咱們專案的 根目錄中，雖然我們看不到它，但是，可以認為， 和 dist  src   node_modules  平級，有一個看不見的檔案，叫做 bundle.js

• index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 注意： 不推薦直接在這裡引用任何包和任何CSS檔案 -->

  <!-- 因為 main 中的程式碼，涉及到了ES6的新語法，但是瀏覽器不識別 -->
  <!-- <script src="./main.js"></script> -->
  <!-- 通過 webpack 這麼一個前端構建工具， 把 main.js 做了一下處理，生成了一個 bundle.js 的檔案 -->
  <!-- <script src="../dist/bundle.js"></script> -->

  <!-- 當使用 html-webpack-plugin 之後，我們不再需要手動處理 bundle.js 的引用路徑了，因為 這個外掛，已經幫我們自動 建立了一個 合適的 script , 並且，引用了 正確的路徑 -->
  <!-- <script src="/bundle.js"></script> -->

  <!-- css 或發起二次請求，不推薦這麼搞 -->
  <!-- <link rel="stylesheet" href="./css/index.css"> -->

</head>

<body>
  <ul>
    <li>這是第1個li</li>
    <li>這是第2個li</li>
    <li>這是第3個li</li>
    <li>這是第4個li</li>
    <li>這是第5個li</li>
    <li>這是第6個li</li>
    <li>這是第7個li</li>
    <li>這是第8個li</li>
    <li>這是第9個li</li>
    <li>這是第10個li</li>
  </ul>
</body>

</html>

使用babel處理高階JS語法

1. 執行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安裝babel的相關loader包
2. 執行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安裝babel轉換的語法
3. 在webpack.config.js中新增相關loader模組，其中需要注意的是，一定要把node_modules資料夾新增到排除項：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

4. 在專案根目錄中新增.babelrc檔案，並修改這個配置檔案如下：

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

5. 注意：語法外掛babel-preset-es2015可以更新為babel-preset-env，它包含了所有的ES相關的語法；

• webpack.config.js

// 由於 webpack 是基於Node進行構建的，所有，webpack的配置檔案中，任何合法的Node程式碼都是支援的
var path = require('path')
// 在記憶體中，根據指定的模板頁面，生成一份記憶體中的首頁，同時自動把打包好的bundle注入到頁面底部
// 如果要配置外掛，需要在匯出的物件中，掛載一個 plugins 節點
var htmlWebpackPlugin = require('html-webpack-plugin')

// 當以命令列形式執行 webpack 或 webpack-dev-server 的時候，工具會發現，我們並沒有提供 要打包 的檔案的 入口 和 出口檔案，此時，他會檢查專案根目錄中的配置檔案，並讀取這個檔案，就拿到了匯出的這個 配置物件，然後根據這個物件，進行打包構建
module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口檔案
  output: { // 指定輸出選項
    path: path.join(__dirname, './dist'), // 輸出路徑
    filename: 'bundle.js' // 指定輸出檔案的名稱
  },
  plugins: [ // 所有webpack  外掛的配置節點
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板檔案路徑
      filename: 'index.html' // 設定生成的記憶體頁面的名稱
    })
  ],
  module: { // 配置所有第三方loader 模組的
    rules: [ // 第三方模組的匹配規則
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 檔案的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 處理 less 檔案的 loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 處理 scss 檔案的 loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 處理 圖片路徑的 loader
      // limit 給定的值，是圖片的大小，單位是 byte， 如果我們引用的 圖片，大於或等於給定的 limit值，則不會被轉為base64格式的字串， 如果 圖片小於給定的 limit 值，則會被轉為 base64的字串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字型檔案的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來轉換高階的ES語法
    ]
  }
}

• main.js

// 專案的JS入口檔案
console.log('ok')

import './css/index.css'
import './css/index.scss'
// 注意： 如果要通過路徑的形式，去引入 node_modules 中相關的檔案，可以直接省略 路徑前面的 node_modules 這一層目錄，直接寫 包的名稱，然後後面跟上具體的檔案路徑
// 不寫 node_modules 這一層目錄 ，預設 就會去 node_modules 中查詢
import 'bootstrap/dist/css/bootstrap.css'

// class 關鍵字，是ES6中提供的新語法，是用來 實現 ES6 中面向物件程式設計的方式
class Person {
  // 使用 static 關鍵字，可以定義靜態屬性
  // 所謂的靜態屬性，就是 可以直接通過 類名， 直接訪問的屬性
  // 例項屬性： 只能通過類的例項，來訪問的屬性，叫做例項屬性
  static info = { name: 'zs', age: 20 }
}

// 訪問 Person 類身上的  info 靜態屬性
console.log(Person.info)
// 在 webpack 中，預設只能處理 一部分 ES6 的新語法，一些更高階的ES6語法或者 ES7 語法，webpack 是處理不了的；這時候，就需要 藉助於第三方的 loader，來幫助webpack 處理這些高階的語法，當第三方loader 把 高階語法轉為 低階的語法之後，會把結果交給 webpack 去打包到 bundle.js 中
// 通過 Babel ，可以幫我們將 高階的語法轉換為 低階的語法
// 1. 在 webpack 中，可以執行如下兩套 命令，安裝兩套包，去安裝 Babel 相關的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 開啟 webpack 的配置檔案，在 module 節點下的 rules 陣列中，新增一個 新的 匹配規則：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2 注意： 在配置 babel 的 loader規則的時候，必須 把 node_modules 目錄，通過 exclude 選項排除掉：原因有倆：
// 2.2.1 如果 不排除 node_modules， 則Babel 會把 node_modules 中所有的 第三方 JS 檔案，都打包編譯，這樣，會非常消耗CPU，同時，打包速度非常慢；
// 2.2.2 哪怕，最終，Babel 把 所有 node_modules 中的JS轉換完畢了，但是，專案也無法正常執行！
// 3. 在專案的 根目錄中，新建一個 叫做 .babelrc  的Babel 配置檔案，這個配置檔案，屬於JSON格式，所以，在寫 .babelrc 配置的時候，必須符合JSON語法規範： 不能寫註釋，字串必須用雙引號
// 3.1 在 .babelrc 寫如下的配置：  大家可以把 preset 翻譯成 【語法】 的意思
        // {
        //   "presets": ["env", "stage-0"],
        //   "plugins": ["transform-runtime"]
        // }
// 4. 瞭解： 目前，我們安裝的 babel-preset-env, 是比較新的ES語法， 之前， 我們安裝的是 babel-preset-es2015, 現在，出了一個更新的 語法外掛，叫做 babel-preset-env ，它包含了 所有的 和 es***相關的語法



// Java  C#  實現面向物件的方式完全一樣了，   class 是從後端語言中借鑑過來的， 來實現面向物件
// var p1 = new Person()


// function Animal(name){
//   this.name  = name
// }
// Animal.info = 123

// var a1 = new Animal('小花')

// // 這是靜態屬性：
// // console.log(Animal.info)
// // 這是例項屬性：
// console.log(a1.name)

• .babelrc

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

相關文章