摘要：例如現(xiàn)在的入門(mén)學(xué)習(xí)手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門(mén)學(xué)習(xí)手記一，主要是介紹了的核心概念，是整個(gè)學(xué)習(xí)過(guò)程的基礎(chǔ)知識(shí)。新生成的類(lèi)似如下入門(mén)學(xué)習(xí)手記因?yàn)樯傻膬?nèi)容過(guò)多，我直接省略掉了。

本人微信公眾號(hào)：前端修煉之路，歡迎關(guān)注。

最近開(kāi)始想要維護(hù)一個(gè)個(gè)人的公眾號(hào)，初心是為了督促自己堅(jiān)持做筆記，將學(xué)習(xí)的東西整理記錄下來(lái)。更進(jìn)一步的要求是提升動(dòng)手能力、文章寫(xiě)作能力，和分享經(jīng)驗(yàn)。終極目標(biāo)就是為了維護(hù)一個(gè)個(gè)人的品牌形象，像提到@阮一峰、@張?chǎng)涡瘛情封、@justjavac 等等業(yè)內(nèi)知名的IT技術(shù)人員一樣，然后用自己的品牌形象獲取一些合法的經(jīng)濟(jì)利益，用來(lái)改善生活。畢竟努力學(xué)習(xí)、認(rèn)真工作，說(shuō)到底還是為了更好的生活。

鑒于以上種種原因和目的，我開(kāi)通了微信公眾號(hào)，并將文章更新到SegmentFault、掘金，進(jìn)一步擴(kuò)大傳播度。目前原創(chuàng)文章已經(jīng)寫(xiě)了7期。在這個(gè)過(guò)程中主要有以下幾點(diǎn)體會(huì)：

1、無(wú)法堅(jiān)持原創(chuàng)日更的囧境。

因?yàn)槲业膶?xiě)作動(dòng)機(jī)是自己的學(xué)習(xí)筆記、工作筆記的整理。也就是說(shuō)，我要有不斷學(xué)習(xí)和工作的過(guò)程，然后將這個(gè)過(guò)程遇到的問(wèn)題和解決方法記錄整理下來(lái)。這就需要強(qiáng)制性的養(yǎng)成一些習(xí)慣，并且壓縮掉一些自己以前花時(shí)間做的事情。目前這幾件事情做到。但是我無(wú)法處理掉臨時(shí)性突發(fā)的事件，尤其是處理起來(lái)比較費(fèi)時(shí)間的事情。一旦將事情解決完畢，自己已經(jīng)筋疲力盡，無(wú)心無(wú)力再堅(jiān)持日更了。

目前想到的解決思路是，首先依然是要堅(jiān)持原創(chuàng)日更文章，內(nèi)容集中在學(xué)習(xí)筆記、工作筆記和一些反思等。然后一旦有臨時(shí)性突發(fā)事件耗費(fèi)自己大量時(shí)間和經(jīng)歷的情況發(fā)生，導(dǎo)致可能第二天無(wú)法更新文章，可以選擇轉(zhuǎn)載一些優(yōu)秀的文章。

目前取得了一位公眾號(hào)作者@蘇南 的轉(zhuǎn)載權(quán)限。希望以后能獲得更多的作者轉(zhuǎn)載權(quán)限。

2、沒(méi)有文章可寫(xiě)的囧境。

之前的幾篇文章主要是自己遇到的一些問(wèn)題，文章的連續(xù)性并不強(qiáng)。如果是想保證能日更，那就必須有新的問(wèn)題出現(xiàn)，并且是值得用來(lái)寫(xiě)文章的。并不是說(shuō)隨便的一個(gè)問(wèn)題，例如標(biāo)點(diǎn)符號(hào)錯(cuò)誤，語(yǔ)法語(yǔ)句錯(cuò)誤，就能拿過(guò)來(lái)寫(xiě)一篇文章的。再有就是字?jǐn)?shù)也不能太少，否則直接在SF上發(fā)一個(gè)筆記就好了。另外估計(jì)只有20、30的文章，是小學(xué)生寫(xiě)的作文吧~ 沒(méi)有什么閱讀的價(jià)值。

所以我想到的解決思路是，做一個(gè)系列。例如現(xiàn)在的《webpack入門(mén)學(xué)習(xí)手記》系列。首先是我在學(xué)習(xí)webpack，然后就是webpack的各方面知識(shí)點(diǎn)足夠我更新一段時(shí)間，最后就是文章內(nèi)容足夠多，也足夠豐富。所以這個(gè)系列就誕生了。

當(dāng)這個(gè)系列更新完畢之后，也不用慌，還有ES6、Vue等等系列都可以寫(xiě)。另外就是一些非系列的性的文章，可以穿插到日更里面。這樣公眾號(hào)的內(nèi)容，也就豐富起來(lái)，也不會(huì)擔(dān)心沒(méi)有文章、沒(méi)有原創(chuàng)文章了。

3、收到粉絲留言和打賞的喜悅。

我的更新思路是，文章是先寫(xiě)到SF平臺(tái)，利用Markdown快速寫(xiě)好文章，然后更新到掘金，最后更新到微信公眾平臺(tái)，等到第二天定時(shí)群發(fā)消息。

這個(gè)過(guò)程中，我SF的聲望已經(jīng)突破了1.5K，掘金和SF的粉絲關(guān)注度也在不斷增加。每次看到又有新的粉絲和點(diǎn)贊收藏，就有繼續(xù)寫(xiě)下去動(dòng)力。因?yàn)榫蚪鸷蚐F不同于微信，都是互相未曾謀面之人，僅僅是因?yàn)槲恼碌暮脡亩P(guān)注和收藏的。

相比于SF和掘金，公眾號(hào)的粉絲大部分是我的親朋好友。他們被我強(qiáng)制性的要求關(guān)注我的公眾號(hào)。其實(shí)他們中有很多人，根本就不知道我寫(xiě)的是什么，但是依然關(guān)注了公眾號(hào)。非常感謝他們的支持~

相比于粉絲數(shù)的增長(zhǎng)，最開(kāi)心的還是收到了真金白銀的打賞。只不過(guò)目前打賞一直沒(méi)有進(jìn)到我的賬戶(hù)，不知道微信是怎么弄的。其實(shí)這幾期里面，給我打賞最多就是我爸媽了，我每寫(xiě)的一篇文章他們都會(huì)下方默默的打賞我1元錢(qián)~ 可憐天下父母心啊~

不同于別的公眾號(hào)打賞，我設(shè)置的金額是1元、2元、5元，小額打賞。因?yàn)槲矣X(jué)得打賞金額過(guò)高，反而會(huì)嚇到一些朋友。能給我打賞一元，就已經(jīng)非常開(kāi)心了。

綜上所述，無(wú)論遇到的問(wèn)題有多難，也會(huì)義無(wú)反顧的堅(jiān)持下去。

以下是正文。

上一篇webpack入門(mén)學(xué)習(xí)手記（一），主要是介紹了webpack的核心概念，是整個(gè)學(xué)習(xí)過(guò)程的基礎(chǔ)知識(shí)。接下來(lái)按照官方文檔給出的指南手冊(cè)依次進(jìn)行。另外我會(huì)根據(jù)個(gè)人理解和操作過(guò)程，對(duì)文檔內(nèi)容有一些修改，如有出入請(qǐng)參考原文。

要想使用webpack，前提是必須安裝Node.js，另外請(qǐng)保證使用最新的穩(wěn)定版本。否則Node的版本過(guò)低，會(huì)導(dǎo)致意想不到的問(wèn)題出現(xiàn)。

官方手冊(cè)中給出了兩種安裝方式，一種是本地安裝（Local Installation）和全局安裝（Global Installation）。在黃色的警告框處，明顯提示說(shuō)，不建議全局安裝，因?yàn)闀?huì)將webpack鎖定到指定的版本，另外也會(huì)在不同的webpack版本的項(xiàng)目中，構(gòu)建失敗。所以我們直接使用本地安裝即可。

首先安裝最新版本的webpack：

npm install --save-dev webpack

因?yàn)槭褂玫膚ebpack v4 以上的版本，所以再安裝cli工具：

npm install --save-dev webpack-cli

注意：
其實(shí)我在安裝的時(shí)候，使用的不是npm命令，而是cnpm。因?yàn)楸娝苤脑颍瑖?guó)內(nèi)下載安裝會(huì)比較慢甚至卡頓，所以使用了淘寶鏡像，可以自行百度下具體說(shuō)明~ 以下文章中提到的所有npm命令地方，都請(qǐng)改成cnpm。

使用本地安裝的好處是，當(dāng)升級(jí)項(xiàng)目時(shí)會(huì)比較方便。如果正確執(zhí)行了上面的兩個(gè)命令，會(huì)在本地目錄多出一個(gè)node_modules目錄和一個(gè)package.json文件。打開(kāi)package.json文件，內(nèi)容如下：

package.json

{
  "devDependencies": {
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  }
}

這就是我們剛才安裝依賴(lài)。此時(shí)的package.json只有3行的代碼，如果是第一次接觸webpack并且是第一次接觸node的朋友，會(huì)被手冊(cè)中接下來(lái)的代碼產(chǎn)生疑問(wèn)。因?yàn)榻酉聛?lái)手冊(cè)添加了一段scripts代碼。我們?cè)陧?xiàng)目中，添加這段代碼之前，先來(lái)執(zhí)行下面這個(gè)命令：

npm init

這個(gè)命令會(huì)初始化一個(gè)新的package.json，因?yàn)槲覀冊(cè)诎惭bwebpack時(shí)生成了一個(gè)package.json，所以接下來(lái)的內(nèi)容會(huì)直接追加到文件中。

執(zhí)行npm init這個(gè)命令之后，會(huì)向你提問(wèn)一系列問(wèn)題，如果覺(jué)得默認(rèn)信息沒(méi)有問(wèn)題的話(huà)，直接回車(chē)就行。新生成的package.json類(lèi)似如下：

package.json

{
  "devDependencies": {
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "name": "webpackstudy",
  "description": "webpack入門(mén)學(xué)習(xí)手記",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "ajv-errors": "^1.0.1",
    ...
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "[email protected]:siberiawolf0307/webpackStudy.git"
  },
  "author": "siberiawolf",
  "license": "MIT"
}

因?yàn)樯傻?b>dependencies內(nèi)容過(guò)多，我直接省略掉了。此時(shí)就能找到指南手冊(cè)中的scripts了。我們?cè)谀J(rèn)的test后面添加上官網(wǎng)中的代碼即可。如下：

package.json

 "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack --config webpack.config.js"
  }

補(bǔ)充：
在使用默認(rèn)package.json是，會(huì)讓用戶(hù)填寫(xiě)license。因?yàn)閷?duì)開(kāi)源協(xié)議比較陌生，我特意去查了一下使用何種開(kāi)源協(xié)議。經(jīng)過(guò)對(duì)比，我發(fā)現(xiàn)使用 MIT 協(xié)議是比較適合我的。MIT 協(xié)議是比較寬松的協(xié)議。此協(xié)議允許別人以任何方式使用你的代碼同時(shí)署名原作者，但原作者不承擔(dān)代碼使用后的風(fēng)險(xiǎn)，當(dāng)然也沒(méi)有技術(shù)支持的義務(wù)。jQuery和Rails就是 MIT 協(xié)議。

上面的添加scripts.start，其實(shí)是運(yùn)行webpack,并且運(yùn)行的配置文件是webpack.config.js。因?yàn)槭謨?cè)進(jìn)行到這里，并沒(méi)有添加任何的 js 文件，所以先不要執(zhí)行這個(gè)命令~ 我們后面再來(lái)學(xué)習(xí)。

說(shuō)明：
我將本小節(jié)代碼托管到了騰訊云開(kāi)發(fā)者平臺(tái)，如果需要查看這節(jié)內(nèi)容，請(qǐng)查找Installation目錄即可。

如果你真的動(dòng)手操作了一遍安裝步驟，并且是初學(xué)者，那么請(qǐng)先刪除掉你文件夾下的package.json文件。因?yàn)榻酉聛?lái)按照手冊(cè)給出的示例，我們是在一個(gè)全新的目錄下進(jìn)行操作的，請(qǐng)注意這一點(diǎn)。

因?yàn)槲覀冊(cè)趫?zhí)行安裝小節(jié)是，肯定已經(jīng)在一個(gè)工作目錄下，例如我的工作目錄是webpackStudy，所以文檔中創(chuàng)建新目錄mkdir webpack-demo && cd webpack-demo省略掉。下面的代碼示例都是在這個(gè)工作目錄下。

因?yàn)橐呀?jīng)刪除掉了package.json文件，接下來(lái)我們新生成一個(gè)：

npm init -y
npm install webpack webpack-cli --save-dev

npm init -y，多了一個(gè)參數(shù)-y，就是說(shuō)不用再詢(xún)問(wèn)我們填寫(xiě)參數(shù)了，直接使用了默認(rèn)值。另外因?yàn)樵诒竟ぷ髂夸浵乱呀?jīng)安裝過(guò)webpack了，此時(shí)執(zhí)行的速度會(huì)非?？?。

接下來(lái)，我們創(chuàng)建相應(yīng)的html、js文件。

project

 webpackStudy
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  let element = document.createElement("div");

  // Lodash, currently included via a script, is required for this line to work
  // 這段英文注釋的意思是說(shuō)，在index.html文件中已經(jīng)引入了Lodash這個(gè)script標(biāo)簽了，所以能正常使用
  element.innerHTML = _.join(["Hello", "webpack"], " ");

  return element;
}

document.body.appendChild(component());

index.html

在工作目錄下創(chuàng)建index.html文件，并創(chuàng)建src目錄，然后創(chuàng)建index.js文件。文件的組織形式如上。然后復(fù)制粘貼html和js代碼。

接下來(lái)我們修改一下package.json文件，刪掉main入口，并設(shè)置private，防止意外發(fā)布代碼。

package.json

{
 "description": "",
+   "private": true,
-   "main": "index.js"
}

需要注意的是，在html頁(yè)面中，我們引入了Lodash這個(gè)js文件。Lodash是一個(gè)JS實(shí)用工具庫(kù)，非常適合于遍歷數(shù)組、字符串和對(duì)象等。

在index.js文件中，并沒(méi)有顯示的聲明需要引入Lodash。這樣就會(huì)造成以下幾個(gè)問(wèn)題：

沒(méi)有顯示聲明，index.js中的代碼依賴(lài)于外部的擴(kuò)展庫(kù)。

如果依賴(lài)不存在，或者引入錯(cuò)誤，應(yīng)用程序無(wú)法正常執(zhí)行。例如沒(méi)有引用Lodash。

如果依賴(lài)文件被引入了，但是沒(méi)有使用，瀏覽器就會(huì)下載無(wú)用代碼。

如果我們使用webpack來(lái)管理JS呢？看看情況如何~

首先調(diào)整一下我們的工作目錄。創(chuàng)建一個(gè)dist目錄，用來(lái)存放壓縮和優(yōu)化之后的代碼。而我們之前創(chuàng)建的src目錄，用來(lái)存放原始代碼。將之前創(chuàng)建的index.html文件移動(dòng)到dist目錄下。最終文件結(jié)構(gòu)如下：

project

webpackStudy
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

因?yàn)槲覀円?b>index.js中顯示聲明Lodash，所以需要先在項(xiàng)目目錄下安裝好，執(zhí)行命令：

npm install --save-dev lodash

注意這里，我使用的是--save-dev參數(shù)。這樣會(huì)將Lodash添加到package.json的devDependencies屬性下。

接下來(lái)，通過(guò)import命令，顯示引用Lodash。

src/index.js

+ import _ from "lodash";
+
  function component() {
    let element = document.createElement("div");

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(["Hello", "webpack"], " ");

    return element;
  }

  document.body.appendChild(component())

然后需要更新下index.html文件，因?yàn)槲覀冃薷牧艘蕾?lài)js的方式。

dist/index.html

  
   
     
-    
   
   
-    
+    
   
  

最后，我們執(zhí)行下面的命令：

npx webpack

然后打開(kāi)index.html文件，就會(huì)看到 Hello webpack。

因?yàn)槲覀冊(cè)趫?zhí)行npx webpack時(shí)，沒(méi)有使用執(zhí)行的配置文件，所以使用默認(rèn)值，也就是會(huì)在dist目錄下生成main.js。而這個(gè)打包之后的文件，就在index.html引入。

如果打開(kāi)main.js，會(huì)發(fā)現(xiàn)Lodash已經(jīng)在這個(gè)文件中了。webpack已經(jīng)幫我們添加好了。

在webpack4 中，不用指定配置文件。但是這樣可擴(kuò)展性就差了。所以我們創(chuàng)建一個(gè)webpack.config.js文件。

在工作目錄下創(chuàng)建webpack.config.js文件。內(nèi)容如下：

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  }
};

然后執(zhí)行如下命令：

npx webpack --config webpack.config.js

執(zhí)行完之后結(jié)果跟之前一樣~

其實(shí)也可以不指定--config webpack.config.js這個(gè)參數(shù)。如果添加了webpack.config.js文件，webpack會(huì)自動(dòng)使用這個(gè)配置文件。

但是假如文件的名字不是webpack.config.js時(shí)，就需要用到--config這個(gè)參數(shù)了。尤其是當(dāng)配置文件被拆分成多個(gè)文件時(shí)，會(huì)非常有用。

之前我們直接在命令行中運(yùn)行的方式叫做CLI，現(xiàn)在通過(guò)配置文件，具備更高的靈活性?？梢灾付╨oader、plugins 等。

還記得在開(kāi)始小節(jié)中，我們添加的scripts.start嗎？現(xiàn)在我們同樣的在package.json中添加一段腳本，這樣我們每次運(yùn)行程序是，只需要簡(jiǎn)單調(diào)用腳本即可。

package.json

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js"
  }

然后在命令行執(zhí)行如下命令：

npm run build

npm run build這段命令，就是制定package.json中的scripts腳本，其中build就是我們剛才定義的內(nèi)容。

說(shuō)明：
我將本小節(jié)代碼托管到了騰訊云開(kāi)發(fā)者平臺(tái)，如果需要查看這節(jié)內(nèi)容，請(qǐng)查找Getting Started目錄即可。

以上就是指南手冊(cè)中的Getting Started部分?？偨Y(jié)一下主要內(nèi)容：

安裝webpack和依賴(lài)的js工具庫(kù)Lodash

通過(guò)默認(rèn)配置和指定配置文件，分別打包文件

使用NPM 腳本運(yùn)行webpack

下一篇筆記整理webpack官方文檔的指南手冊(cè)剩余部分，敬請(qǐng)關(guān)注。

（待續(xù)）

相關(guān)文章

webpack入門(mén)學(xué)習(xí)手記（一）

webpack入門(mén)學(xué)習(xí)手記（二）

webpack入門(mén)學(xué)習(xí)手記（三）

webpack入門(mén)學(xué)習(xí)手記（四）