Vue學習5-(webpack)

上一篇 Vue學習4-(組件與路由)
下一篇 Vue學習6-(webpack發佈策略)

---

一、什麼是webpack

• webpack 是前端項目的構建工具，將來，我們開發的項目，如果想要提高維護性和可控制性的話，儘量選擇 webpack 進行構建；
• webpack 非常適合與單頁面應用程序結合使用；不太適合與多頁面的普通網站結合使用；
• 項目中使用 webpack 有什麼好處：
  • 能夠處理靜態資源的 依賴關係；
  • 能夠優化項目代碼，比如：壓縮合並文件，把圖片轉爲base64編碼格式；
  • 能夠把高級的語法轉爲低級的語法；
  • webpack 能夠轉換一些模板文件； .vue
• 根據官網的圖片介紹webpack打包的過程
  webpack官網

二、webpack安裝方式

1、可以全局安裝webpack, 運行npm i webpack -g 全局安裝一下webpack；

2、也可以在項目中安裝 webpack, 運行npm i webpack -D 安裝到項目開發依賴即可；

三、webpack打包使用

1、直接運行全局的 webpack 指令進行打包構建：

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

2、webpack.config.js配置文件簡化打包時候的命令

(1)在項目中，新建一個配置文件叫做webpack.config.js
(2)在配置文件中，向外暴露一個配置對象，供webpack執行的時候來讀取這個配置對象：

3、 webpack-dev-server實時打包構建

• 1、每次修改完 項目代碼，都需要手動運行一下 webpack 命令進行打包構建；比較麻煩

• 2、可以在項目本地安裝一個webpack-dev-server的工具來實現實時打包構建的效果；

• 3、注意： webpack-dev-server這個工具，需要在項目本地安裝，同時，它依賴於項目本地的webpack: npm i webpack webpack-dev-server -D

• 4、需要打開package.json這個配置文件，找到 scripts 節點，在其中，新增一個dev腳本命令：
  

• 5、只要在終端中，運行 npm run dev命令，去執行 dev腳本，啓動webpack-dev-server這個實時構建編譯的服務器；

• 6、注意：webpack-dev-server打包出來的 bundle.js 並沒有存放到實際的物理磁盤，而是託管到了內存中！託管的路徑是項目的根目錄，所以，在引用的時候，script 標籤的路徑應該這樣寫：

四、使用html-webpack-plugin插件配置啓動頁面

• 1、這個插件的作用：
  能夠根據給定的頁面路徑，在內存中生成一個一模一樣的頁面；
  能夠在內存中生成的頁面中，自動把 打包好的 bundle.js 文件，注入爲一個 script 標籤！

• 2、如何配置插件：先運行 npm i html-webpack-plugin -D 安裝到本地開發依賴
  
  

五、實現自動打開瀏覽器、熱更新和配置瀏覽器的默認端口號

六、使用webpack打包css、less、sass文件、處理css中的路徑

• 1.運行 npm i style-loader css-loader -D 來安裝處理 .css 文件的 第三方loader加載器

• 2、運行npm i less-loader less -D安裝相關的loader

• 3、運行npm i sass-loader node-sass -D

• 4、運行npm i url-loader file-loader -D

• 在webpack.config.js 的配置對象中，添加一個 module 節點，並在 module 節點下，新增一個 rules 數組，表示非JS文件的匹配規則：
  
  
  處理css中的路徑：

• 如果想要限制什麼圖片被轉碼，什麼圖片不被轉碼，這時候，可以爲 url-loader 提供 limit配置參數；只有小於給定值的圖片，纔會被轉碼成base64；limit 的單位是Byte字節

• url-loader還有第二個配置參數，叫做 name

  [name] 表示原來的名字
  [ext] 表示原後綴名
  [hash:長度] 表示取Hash值的前幾位（總長度是 32 位字符串）
  

七、第三方loader與webpack之間的調用關係

八、使用babel處理高級JS語法

1、安裝兩套babel相關的包：

運行 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
運行 cnpm i babel-preset-env babel-preset-stage-0 -D

2、打開webpack.config.js配置文件，添加babel的loader配置項：

3、在項目的根目錄中，創建一個.babelrc的配置文件，將來，babel-loader在執行的時候，會讀取並使用這個配置文件：

九、ES6新特性

let const
箭頭函數
Promise
解構賦值
默認形參
函數擴展 function test(…arg) var arr = [1,2,3] test(…arr)
模板字符串 ${name}
字符串的擴展 .startsWith .endsWith padStart padEnd includes
async await
ES6中的導入和導出 import 變量名 from ‘標識符’ export default {} export
定義對象的快捷方式 var a =10 { a, show(){} }
class 關鍵字
Fetch API（作用就是來發起Ajax請求的， 目的是爲了替代傳統的XHR對象） fetch(請求的url地址字符串)
.then(function(response){
return response.json() }).then(result=>{
console.log(result) })

1、導入與導出

2、class實現面向對象編程

function Person(name, age) {
  // 這裏的 name 和 age 叫做 實例屬性【只能通過實例對象，點 出來的屬性，叫做實例屬性】
  this.name = name
  this.age = age
}
// 原型方法     實例方法
Person.prototype.showName = function () {
  console.log('我是：' + this.name)
}

// 這裏的 info 叫做 靜態屬性【直接使用 構造函數 點 出來的屬性，叫做 靜態屬性】
Person.info = '這是function構造函數'

var p1 = new Person('zs', 22)
/* console.log(p1.age)
console.log(Person.info) */
/* p1.showName() */



// 使用 class 定義的 ，叫做類
class Per {
  // constructor 是構造函數的意思
  // 每當 new Per() 的時候，必然會優先調用 Per 上的  constructor
  constructor(name, age) {
    // console.log('ok')
    this.name = name
    this.age = age
  }

  // static 是關鍵字，專門用來創建靜態屬性的
  static info = '這是使用class關鍵字定義的類'

  // 靜態方法：
  static show() {
    console.log('這是靜態的show方法')
  }

  // 實例方法
  showName() {
    console.log('我是' + this.name)
  }
}

var p2 = new Per('ls', 13)
// console.log(p2.name)// 實例屬性【通過類的實例，點出來的屬性】
// console.log(Per.info) // 靜態屬性【通過類直接點出來的屬性】
// 調用靜態方法
// Per.show()

// console.log(p2)
p2.showName()

3、使用class實現面向對象編程

/* // 創建一個Person類
class Person {
  // 在 class 的 { } 作用域中，只能寫 constructor 函數，靜態方法、靜態屬性、實例方法
  // 在 class 類中，必須有一個 constructor，如果你沒有顯示定義，則 系統會默認提供一個看不見的constructor

  // 如果用戶顯示定義了一個 constructor， 則會把默認的那個看不見的 constructor 給 覆蓋掉
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}
//創建一個廣東人的類
class GDRen {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
} */

// ---------------------------------------------------------------------

// 創建一個Person類
class Person {
  // 在 class 的 { } 作用域中，只能寫 constructor 函數，靜態方法、靜態屬性、實例方法
  // 在 class 類中，必須有一個 constructor，如果你沒有顯示定義，則 系統會默認提供一個看不見的constructor

  // 如果用戶顯示定義了一個 constructor， 則會把默認的那個看不見的 constructor 給 覆蓋掉
  constructor(name, age) {
    console.log('ok')
    this.name = name
    this.age = age
  }

  // 實例方法
  sayHello() {
    console.log('我的名字是：' + this.name)
  }
}

//創建一個廣東人的類
class GDRen extends Person {
  // 什麼叫面向對象？？？
  // 記住這一句就行了：面向對象，就是【封裝】、極致的封裝就是面向對象；什麼是極致的封裝呢：【封裝、繼承、多態】
  // 面向對象，就是把 一些功能性的代碼，封裝到 具體的 類中，如果需要什麼功能，就 new 什麼樣類，這樣，即提高的代碼的複用性，提高了開發的效率和協作開發的體驗；
  // 談編程的發展歷史      面向過程（函數式編程）   ->  面向對象（以對象的形式來組織代碼）
  constructor(name, age, eathobby) {
    // super 這個函數，引申爲 父類的構造函數
    // 注意： 如果 子類 通過  extends 關鍵字，實現了繼承，那麼，子類的構造函數中，必須先調用一下 super 這個父類的構造函數，才能使用 this 
    console.log('ook')
    super(name, age)
    console.log('esc')
    this.eathobby = eathobby
  }
}

// var p1 = new Person('高婆婆', 26)
// console.log(p1)

var gd1 = new GDRen('xjj', 18, '福建人')
console.log(gd1)
gd1.sayHello()

4、使用fetchAPI請求服務器的數據

<!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>
</head>

<body>
  <script>
    /* fetch('http://39.106.32.91:3000/api/getlunbo')
      .then(response => { // 通過 fetch 請求的結果，如果成功了，則第一個 .then中拿不到最終的數據
        // console.log(response)
        // 調用 response.json() 得到一個新的 Promise 對象
        return response.json()
      })
      .then(data => { // 第二個.then中得到的纔是真實的 數據
        console.log(data)
      }) */

    // 課下研究 fetch API 能不能結合 async 和 await 來獲取數據
    getInfo()
  </script>
</body>

</html>

---

上一篇 Vue學習4-(組件與路由)
下一篇 Vue學習6-(webpack發佈策略)