溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Webpack快速入門（一）

發(fā)布時間：2020-06-08 23:47:07 來源：網(wǎng)絡(luò) 閱讀：918 作者：googlingman 欄目：web開發(fā)

本文可供Webpack新手與Webpack老手復(fù)習(xí)之參考。注：本文基于當(dāng)前最新的webpack V4.29.5；本文示例操作步驟在Mac下實現(xiàn)。

前提

（1）具有一定JavaScript基礎(chǔ)
（2）了解npm基本使用

什么是Webpack？

有文（參考（2））說“WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用”。
而官方的解釋是“Webpack is used to compile JavaScript modules”，中文意思是“Webpack用于編譯JavaScript模塊”。或者在官方網(wǎng)站上的另一個說法是“At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.”，中文意思是“webpack的核心是現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊捆綁器。 當(dāng)webpack處理您的應(yīng)用程序時，它會在內(nèi)部構(gòu)建一個依賴關(guān)系圖，它映射您的項目所需的每個模塊并生成一個或多個包?！?/code>

作為基本的入門理解，先看一下下圖知道Webpack的作用就可以了。
Webpack快速入門（一）

總之，Webpack功能很強大，是你立志于學(xué)習(xí)JavaScript從業(yè)開發(fā)的必需之一。

快速入門示例

第一步

創(chuàng)建示例工程文件夾并進入其中。

mkdir ex1 && cd ex1

第二步

在工程文件夾創(chuàng)建配置文件package.json。
npm init -y

注：參數(shù)-y說明在創(chuàng)建配置文件時的一些系統(tǒng)提示都選擇默認。完成后的文件package.json內(nèi)容如下：

{
  "name": "ex1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
   }
}

其中的很多內(nèi)容相信你一看就明白，不明白的暫時不必理會。

第三步

在本地安裝Webpack及其命令行。
說明：建議你使用本地安裝方式，這樣不需要時刪除即可，不至于在老留在全局存儲中占用空間。另外，我們先從最簡單最基本的命令行方式入手，所以，也要把webpack的命令行一起安裝。
npm install webpack webpack-cli --save-dev

上述命令先后安裝了兩個命令：webpack和它的命令行webpack-cli。其中，參數(shù)--save-dev指明把這兩個模塊版本信息保存到devDependencies（開發(fā)環(huán)境依賴）中，即你的package.json文件的devDependencies字段中。

之后，文件package.json內(nèi)容變成如下模樣：

{
  "name": "ex1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3"
  }
}

第四步

我們在本文最基本示例中，要創(chuàng)建的文件夾結(jié)構(gòu)如下圖所示：

Webpack快速入門（一）

其中，app文件夾用來存放原始數(shù)據(jù)和我們即將創(chuàng)建的JavaScript模塊，public文件夾用來存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個index.html文件）。

首先，創(chuàng)建index.html文件，其內(nèi)容是一些最基礎(chǔ)的html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

然后，稍微修改一下，變成如下模樣：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>

注意：在這里引用了一個名為bundle.js的文件。此文件將是我們稍后打包本示例中多個js文件后的結(jié)果文件。

然后，創(chuàng)建app文件夾下的Greeter.js文件，內(nèi)容如下：

module.exports=function () {
    var greet=document.createElement('div');
    greet.textContent='Hi, this is ABC to webpack!';
    return greet;
}

此文件（模塊）的作用也很簡單：創(chuàng)建HTML文檔中的一個DIV元素，并返回此元素。
最后，看一下app文件夾下的main.js文件，內(nèi)容如下：

 const greeter=require('./Greeter')
document.querySelector('#root').appendChild(greeter());

作用是：引用上面的Greeter.js文件（模塊），并查詢上面HTML文件中名字為root的DIV元素，然后在其后加入由文件Greeter.js文件創(chuàng)建并返回的DIV元素。

第五步－－－－關(guān)鍵步驟

在命令行下運行webpack實現(xiàn)捆綁已有js文件并生成新的js文件的任務(wù)。

注意，webpack不帶配置文件的命令行使用格式如下：

webpack <entry> [<entry>] -o <output>

即webpack命令后面跟兩部分，第一部分是一個或者一組輸入js文件，用于由它們捆綁生成后面的輸出文件。第二部分，由參數(shù)-o指出，對應(yīng)捆綁生成的結(jié)果js文件。那么，在本例中，如果我們使用如下命令會有什么結(jié)果呢：

webpack app/main.js -o public/bundle.js

結(jié)果可能會出乎你的意料，系統(tǒng)提示如下：

webpack: command not found

為什么出現(xiàn)沒有找到命令呢？原因是在本文最開始時我們僅以局部方式安裝了webpack，而沒有以全局方式安裝（避免全局系統(tǒng)內(nèi)容“污染”）。
其實，正確的答案應(yīng)該是：
npx webpack app/main.js -o public/bundle.js

那么，這個npx是什么呢？

原來從Node 8.2/npm 5.2.0以后，其自帶了一個npx文件，稱為npm包執(zhí)行器。npx 會自動幫助我們執(zhí)行依賴包里的二進制文件（在本例中是‘(./node_modules/.bin/webpack)’）。具體細節(jié)在此省略，有興趣的朋友可參考文后（3）。

到此，在public文件夾下生成bundle.js文件。而且，令人驚喜的是，webpack會自動根據(jù)上面js文件中的內(nèi)部引用邏輯，自動搜索。例如，上面main.js文件中引用了Greeter.js，這個便由webpack自動分析出來。然后，對這個main.js文件進行編譯解析，最后出現(xiàn)結(jié)果文件bundle.js到目標路徑下。
作為提醒，如果各位對c/c++/java等語言的編譯、鏈接機制有所了解的話，您便不難理解這其中的邏輯，webpack正是完成了類似的自動的根據(jù)內(nèi)部各文件間的引用路徑完成指定任務(wù)。

最后，運行Index.html文件，此文件自動引用由上面webpack運行得到的那個bundle.js文件，并最終輸出結(jié)果如下：

Hi, this is ABC to webpack!

有關(guān)webpack的其他用法及進一步解釋，我們后面再專門繼續(xù)介紹。怎么樣？對webpack的功用有些了解了吧？

參考

（1）https://www.npmjs.com/
（2）https://segmentfault.com/a/1190000006178770?utm_source=tag-newest
（3）https://blog.csdn.net/csdn_yudong/article/details/81670477

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手