webpack基礎打包技術

Webpack是一種前端資源構建工具，一個靜態模塊打包器(module bundler)。在 Webpack看來,前端的所有資源文件(js/json/css/img/less/...)都會作為模塊處理。它將根據模塊的依賴關系進行靜態分析，打包生成對應的靜態資源(bundle)。webpack是一個給js準備的打包工具，官方的定義也就是一個打包器。它可以把很多的模塊打包成很少的靜態文件。webpack有一個自己的特性，就是代碼分割；代碼分割使得項目在加載時只加載當時需要的一些文件。

9.1 webpack簡介

9.1.1 webpack概念

Webpack????是一個模塊打包器。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照

指定的規則生成對應的靜態資源。打包如下圖8.1所示。

圖9.1 webpack打包圖框架

Webpack的特點如下：

? 代碼拆分

Webpack有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點，形成一個新的塊。在優化了依賴樹后，每一個異步區塊都作為一個文件被打包。

? Loader

Webpack本身只能處理原生的????JavaScript模塊，但是loader轉換器可以將各種類型的資源轉換成JavaScript模塊。這樣，任何資源都可以成為????Webpack????可以處理的模塊。

? 智能解析

Webpack有一個智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是CommonJS、AMD還是普通的????JS文件。甚至在加載依賴的時候，允許使用動態表達式require("./templates/"+name+".jade")。

? 插件系統

Webpack還有一個功能豐富的插件系統。大多數內容功能都是基于這個插件系統運行的，還可以開發和使用開源的????Webpack????插件，來滿足各式各樣的需求。

? 快速運行

Webpack使用異步I/O和多級緩存提高運行效率，這使得????Webpack????能夠以令人難以置信的速度快速增量編譯。

9.1.3 webpack安裝

首先要安裝 Node.js，Node.js自帶了軟件包管理器????npm，Webpack需要Node.js????v 0.6????以上支持，建議使用最新版Node.js。

webpack是前端的一個項目構建工具， 是基于node.js開發出來的一款工具；

webpack安裝的安裝步驟如下所示。

第一步驟：在本地安裝webpack和webpack-cli，其中，--save-dev是本地安裝。如果全局安裝參數是-個，全局的指的是電腦上安裝的webpack包, 所有項目都可以使用。本地webpack是指當前項目的webpack包. 通常全局webpack版本會比較高。

npm i webpack webpack-cli --save-dev

查看版本號：

webpack -v????????????????????????// 查看命令

webpack 5.44.0????????????????????// 顯示版本號

注意：如果當前的webpack本號是4.x版本，可以npm install webpack@latest -D進行升級。

9.1.2 webpack入門案例

為了更好的來理解webpack的使用，我們使用Visual Studio Code開發工具來演示，接下是詳細步驟。

(1) 新建一個文件夾chapter08，然后創建src、dist目錄，使用Visual Studio Code打開，如圖9.2所示。

圖9.2 創建chapter08目錄

(2) 建立好目錄后，在當前目錄下使用“npm init -y”初始化命令，在init的時候省去了逐步敲回車的步驟，生成的默認的package.json。

(3) 在src目錄下導入jquery.min.js，該文件從資源庫或網上獲取，然后在src目錄下創建main.js文件，代碼如下所示。

1 $(function(){

2 $('p').css('background','green');

3 });

(4) 接下來在src目錄下面創建index.html，代碼如下所示。

1

2

3

4

5

6

7 ”，修改為“”，再次刷新頁面會發現p標簽背景已經發生了變化。如圖8.8所示。

圖9.8 “npm run dev”下的index.html修改效果

但是此時出現的問題是，是需要我們在地址欄每次都輸入要訪問的頁面名稱，那由沒有一種方法不用我們輸入頁面名稱呢？我們可以在5.2.1的webpack.config.js第15行代碼之后增加如下代碼段。

1 , // 注意增加逗號

2 //只在內存中打包，不會輸出，啟動命令為webpack-dev-server

3 devServer:{

4 contentBase:path.join(__dirname,"src"),

5 compress:true,

6 port:3000,

7 open:true,

8 hot:true

9 }

接下來，在客戶端運行“num run dev”，會直接進入到瀏覽器頁面，p標簽背景色為紅色，如果我們將main.js的背景色修改為“yellow”后，p標簽背景色會在瀏覽器即時顯示為黃色。如圖8.8所示。

圖9.9 修改main.js后的index.html效果

注意：讀者在閱讀的時候，為了減少創新的文件和案例，會在之前的文件上進行修改。

5.2.3 生成html插件

我們使用webpack-dev-server能夠實現自動打包編譯，生成的bundle.js在內存中，不被用戶看到，還要設置script的src標簽為 /bundle.js 才能實現自動打包編譯。那么我們能否不用自動配置script的src屬性呢？

使用webpack的插件，html-webpack-plugin能夠實現在內存中創建index.html，并且不用設置script標簽，這個插件自動為我們導入生成的bundle.js。

首先，在VS Code終端下使用“npm i html-webpack-plugin -D”安裝html-webpack-plugin插件，安裝完畢package.json可以看到。

"devDependencies": {

"html-webpack-plugin": "^5.3.2",

"jquery": "^3.6.0",

"webpack": "^5.45.1",

"webpack-cli": "^4.7.2",

"webpack-dev-server": "^3.11.2"

}

既然是一個基于webpack的插件，那么配置就肯定是要在webpack.config.js中進行的。接下來，修改webpack.config.js文件，修改后的代碼如下所示。

1 const?path?=?require('path');

2 const?htmlWebpackPlugin?=?require("html-webpack-plugin");????????// 新增代碼

3 module.exports?=?{

4 ????//入口起點

5 ????entry:path.join(__dirname,'./src/main.js'),//入口

6 ????//輸出路徑以及文件名字

7 ????output:{

8 ????????path:path.join(__dirname,'./dist'),

9 ????????filename:'bundle.js'

10 ????},

11 ????//配置loader

12 ????module:{

13 ????????rules:[]

14 ????},

15 ????//配置插件

16 ????plugins:[

17 ????????????????????????????????????????????//新增代碼，用來生成內存中的html頁面

18 ????????new?htmlWebpackPlugin({

19 // 需要復制在內存中的文件路徑

20 ????????????template:path.join(__dirname,"./src/index.html"),

21 ????????????filename:"index.html"???????? // 復制完成后的文件名

22 ????????}),

23 ????],

24 ????//設置模式，開發模式和生產模式只能配置一個

25 ????mode:'development',

26 ????//只在內存中打包，不會輸出，啟動命令為webpack-dev-server

27 ????devServer:{

28 ????????contentBase:path.join(__dirname,"src"),?????//?設置啟動后訪問的目錄

29 ????????compress:true,??????????????????????????????//?配置是否啟用?gzip?壓縮

30 ????????port:8888,??????????????????????????????????//?更改服務器端口號

31 ????????open:true,??????????????????????????????????//?啟動后直接打開瀏覽器

32 ????????hot:true????????????????????????????????????//?設置局部刷新

33 ????}

34 }

將index.html中的script刪除后，運行“npm run dev”命令。運行結果如圖8.8所示。

圖9.10 html插件運行的index.html效果

在該頁面上單擊鼠標右鍵，查看當前頁面源碼。如下所示。

1

2

3

4

5

6

7

<fieldset id="cisq0"></fieldset>

<strike id="cisq0"></strike>