Webpack快速入門（一）-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì)，在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕十多年，專業(yè)且經(jīng)驗(yàn)豐富。十多年網(wǎng)站優(yōu)化營(yíng)銷經(jīng)驗(yàn)，我們已為超過(guò)千家中小企業(yè)提供了成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)解決方案，按需制作，設(shè)計(jì)滿意，售后服務(wù)無(wú)憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!

前提

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

什么是Webpack？

有文（參考（2））說(shuō)“WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用”。
而官方的解釋是“Webpack is used to compile JavaScript modules”，中文意思是“Webpack用于編譯JavaScript模塊”。或者在官方網(wǎng)站上的另一個(gè)說(shuō)法是“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)用程序時(shí)，它會(huì)在內(nèi)部構(gòu)建一個(gè)依賴關(guān)系圖，它映射您的項(xiàng)目所需的每個(gè)模塊并生成一個(gè)或多個(gè)包?！?/code>

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

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

快速入門示例

第一步

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

mkdir ex1 && cd ex1

第二步

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

注：參數(shù)-y說(shuō)明在創(chuàng)建配置文件時(shí)的一些系統(tǒng)提示都選擇默認(rèn)。完成后的文件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)容相信你一看就明白，不明白的暫時(shí)不必理會(huì)。

第三步

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

上述命令先后安裝了兩個(gè)命令：webpack和它的命令行webpack-cli。其中，參數(shù)--save-dev指明把這兩個(gè)模塊版本信息保存到devDependencies（開(kāi)發(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"
  }
}

第四步

我們?cè)诒疚淖罨臼纠?，要?jiǎng)?chuàng)建的文件夾結(jié)構(gòu)如下圖所示：

Webpack快速入門（一）

其中，app文件夾用來(lái)存放原始數(shù)據(jù)和我們即將創(chuàng)建的JavaScript模塊，public文件夾用來(lái)存放之后供瀏覽器讀取的文件（包括使用webpack打包生成的js文件以及一個(gè)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>

注意：在這里引用了一個(gè)名為bundle.js的文件。此文件將是我們稍后打包本示例中多個(gè)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;
}

此文件（模塊）的作用也很簡(jiǎn)單：創(chuàng)建HTML文檔中的一個(gè)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)鍵步驟

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

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

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

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

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

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

webpack: command not found

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

那么，這個(gè)npx是什么呢？

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

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

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

Hi, this is ABC to webpack!

有關(guān)webpack的其他用法及進(jìn)一步解釋，我們后面再專門繼續(xù)介紹。怎么樣？對(duì)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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文題目：Webpack快速入門（一）-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://muchs.cn/article20/djgcco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄、網(wǎng)站導(dǎo)航、電子商務(wù)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)