webpack的使用

1.2 靜態資源多了帶來的問題

網頁載入速度慢，因為我們要發起很多的二次請求
要處理錯綜複雜的依賴關係

1.3 如何解決上述問題

合併、壓縮(gzip)、精靈圖、圖片的Base64編碼
可以使用webpack解決各個包之間的複雜依賴關係

1.4 什麼是webpack

webpack 是前端的一個專案構建工具，它是基於 Node.js 開發出來的一個前端工具；
藉助於webpack這個前端自動化構建工具，可以完美實現資源的合併、打包、壓縮、混淆等諸多功能。

2. webpack的使用

2.1 webpack的安裝

全域性安裝執行npm i webpack -g

這樣就可以在全域性使用webpack的命令了
在專案根目錄中執行npm i webpack --save-dev安裝到專案依賴中

備註：在webpack4之後的版本，不光需要安裝webpack還需要安裝webpack-cli

2.2 webpack的使用

2.2.1 案例描述

使用webpack實現列表的隔行換色，通過這個案例學習webpack的基本使用

2.2.2 專案搭建思路

在有了webpack之後，我們專案都是工程化管理，每個專案的結構是很清晰。
對於我們的專案來說會有很多依賴，這個時候我們需要通過npm去管理這些依賴，使用npm init構建專案,使用package.json管理專案。（npm前端的包管理工具）

src下放我們的原始碼
src

api 放置介面請求的
assets 靜態檔案
components 元件
layout 介面佈局
router 路由配置
styles 樣式
utils 工具類
views 放介面
index.html 根介面
main.js 入口檔案
index.css / index.less / index.sass 全域性樣式
...

安裝jquery外掛 npm i jquery

npm install

-g 全域性安裝
-S 或--save : 把這個依賴儲存到package.json的dependence裡
-D 或 --dev-save : 把這個依賴儲存到package.json的devDependence裡

不在頁面中引入jquery而是在main.js中引用jquery（使用es6高階語法），這樣做可以減少請求次數
編寫js指令碼
瀏覽器不認識es6的高階語法，所以使用webpack打包js檔案，將這個js檔案轉化成瀏覽器可以認識的檔案.

安裝webpack npm i webpack -D
安裝webpack-cli npm i webpack-cli -D
執行打包命令, webpack 【需要打包的檔案】 -o 【輸出的檔案】
因為webpack不是全域性安裝所以沒有辦法在命令列中直接執行webpack命令，這裡可以藉助npm提供的npx命令執行webpack命令 npx webpack 【需要打包的檔案】 -o 【輸出的檔案】

在html中引入打包好的js檔案

npx 可以執行專案已經安裝的可執行工具

2.2.3 webpack為我們做了什麼？

處理了js的依賴關係，對js做了合併。
讓瀏覽器不識別的高階語法，轉換成瀏覽器可以識別的語法。

$(function(){
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','blue')
})

2.3 webpack的配置檔案webpack.config.js

2.3.1 webpack4有預設的配置檔案

預設配置的入口檔案是src目錄。我們在src根目錄下新增index.js，就會預設打包這個index.js檔案
出口檔案在dist目錄下生成main.js

2.3.2 自定義配置檔案

建立webpack.config.js的檔案，放在專案的根目錄
配置入口和出口，配置放在module.exports匯出的物件裡

入口entry，配置這個時候後面寫的是路徑，這裡用到的是node提供的path的api進行路徑的拼接
出口output

path
filename

// webpack的配置檔案
const path = require('path');

// 為什麼使用path提供的方法拼接路徑
// /src/ ,/src , index.js. /index.js
// /src//index.js
// /src/index.js

module.exports = {
    entry: path.join(__dirname, 'src/main.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

之後直接執行webpack即可打包

在node裡__dirname是這個js的當前路徑

使用了配置檔案之後，我們就不用每次輸入入口和出口了，可以簡化我們的操作，也能避免不必要的錯誤

執行webpack之後發生了什麼：

它會去專案的根目錄裡找webpack.config.js配置檔案，如果沒找到會使用預設的配置檔案，這個預設的配置檔案是在webpack4之後才有的。預設的入口是src/index.js，預設的出口是dist/main.js。
回去找到配置檔案配置的入口entry和出口output。
執行webpack的打包命令，將入口檔案轉化成出口檔案。

配置多個入口

應用場景：

業務程式碼和第三方程式碼分離。
多模組懶載入(單頁面應用)

業務場景：在單頁面應用中，如果不做懶載入首頁載入時，會把所有的js都加載出來，導致首頁載入過慢
解決：載入首頁的只加載首頁的js，用到哪個模組就加在那個模組的js

如何配置：

entry之前是單個的地址，只能對應一個檔案，entry可以配置成一個物件，物件的key就打包的入口檔案起的名字，value是檔案對應的地址。
output的filename改為[name].js ，這裡[name]指向就是配置的key的名字。

module.exports = {
    entry: {
        bundle: path.join(__dirname, 'src/main.js'),
        index: path.join(__dirname, 'src/index.js')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    }
}

2.4 使用webpack-dev-server外掛啟動頁面

2.4.1 問題

每次修改之後都要重新打包，之後重新整理頁面，操作很繁瑣，使用webpack-dev-server就可以解決這個問題

2.4.2 如何使用

安裝webpack-dev-server依賴 npm i webpack-dev-server -D
執行這個命令啟動服務

通過npx執行指令碼npx webpack-dev-server
配置package.json指令碼

配置之後通過npm run 【配置的名字】就可以啟動

  "scripts": {
    "dev": "webpack-dev-server",
  },

2.4.3 執行這個webpack-dev-server發生了什麼

啟動了一個服務，這個服務預設啟動在8080埠
執行webpack命令，把輸出的內容放在了記憶體裡，我們直接通過localhost:8080/【輸出的檔名】就可以訪問到這個檔案。

為什麼要放在記憶體裡：我們檔案一儲存就會進行打包編譯，會頻繁涉及到檔案的讀寫，記憶體的讀寫效率要比硬碟高很多，所以放在記憶體裡。

我們一修改入口檔案，就會執行打包命令，介面就會進行重新整理

2.5 實現自動開啟瀏覽器以及熱更新

通過命令列指定引數的方式實現 webpack-dev-server --open --port 3000 --contentBase src --hot 注意引數之間都有空格

open 開啟瀏覽器
port 服務埠號
contentBase 預設的介面
hot 熱部署，每次修改js檔案只會打包修改的地方，提高效率,瀏覽器不重新整理修改內容

使用配置檔案配置devServer

module.exports = {
    ..., // 省略了前面的內容
    devServer: {
        // --open --contentBase src --port 3000 --hot",
        open: true,
        contentBase: 'src',
        port: 3000,
        hot: true
    }
}

3. html的使用html-webpack-plugin

(首先確認命令列的路徑)

安裝html-webpack-plugin npm i html-webpack-plugin -D
配置html-webpack-plugin

// 先引入
const htmlWebpackPlugin = require('html-webpack-plugin');


// webpack.config.js
plugins: [ // 配置外掛的節點
    new htmlWebpackPlugin({ // 建立一個 在記憶體中 生成 HTML  頁面的外掛
      // 指定 模板頁面，將來會根據指定的頁面路徑，去生成記憶體中的 頁面
      template: path.join(__dirname, './src/index.html'), 
       // 指定生成的頁面的名稱
      filename: 'index.html'
    })
  ],

生成的檔案和之前檔案的區別，生成的檔案裡面會自動引入打包好的js檔案。

Git常用命令與常見問題解決