webpack入門學習手記（二）

siberiawolf0307發表於2018-12-14
Web

本人微信公眾號：前端修煉之路，歡迎關注。

最近開始想要維護一個個人的公眾號，初心是為了督促自己堅持做筆記，將學習的東西整理記錄下來。更進一步的要求是提升動手能力、文章寫作能力，和分享經驗。終極目標就是為了維護一個個人的品牌形象，像提到@阮一峰、@張鑫旭、@情封、@justjavac 等等業內知名的IT技術人員一樣，然後用自己的品牌形象獲取一些合法的經濟利益，用來改善生活。畢竟努力學習、認真工作，說到底還是為了更好的生活。

鑑於以上種種原因和目的，我開通了微信公眾號，並將文章更新到SegmentFault、掘金，進一步擴大傳播度。目前原創文章已經寫了7期。在這個過程中主要有以下幾點體會：

1、無法堅持原創日更的囧境。

因為我的寫作動機是自己的學習筆記、工作筆記的整理。也就是說，我要有不斷學習和工作的過程，然後將這個過程遇到的問題和解決方法記錄整理下來。這就需要強制性的養成一些習慣，並且壓縮掉一些自己以前花時間做的事情。目前這幾件事情做到。但是我無法處理掉臨時性突發的事件，尤其是處理起來比較費時間的事情。一旦將事情解決完畢，自己已經筋疲力盡，無心無力再堅持日更了。

目前想到的解決思路是，首先依然是要堅持原創日更文章，內容集中在學習筆記、工作筆記和一些反思等。然後一旦有臨時性突發事件耗費自己大量時間和經歷的情況發生，導致可能第二天無法更新文章，可以選擇轉載一些優秀的文章。

目前取得了一位公眾號作者@蘇南 的轉載許可權。希望以後能獲得更多的作者轉載許可權。

2、沒有文章可寫的囧境。

之前的幾篇文章主要是自己遇到的一些問題，文章的連續性並不強。如果是想保證能日更，那就必須有新的問題出現，並且是值得用來寫文章的。並不是說隨便的一個問題，例如標點符號錯誤，語法語句錯誤，就能拿過來寫一篇文章的。再有就是字數也不能太少，否則直接在SF上發一個筆記就好了。另外估計只有20、30的文章，是小學生寫的作文吧~ 沒有什麼閱讀的價值。

所以我想到的解決思路是，做一個系列。例如現在的《webpack入門學習手記》系列。首先是我在學習webpack，然後就是webpack的各方面知識點足夠我更新一段時間，最後就是文章內容足夠多，也足夠豐富。所以這個系列就誕生了。

當這個系列更新完畢之後，也不用慌，還有ES6、Vue等等系列都可以寫。另外就是一些非系列的性的文章，可以穿插到日更裡面。這樣公眾號的內容，也就豐富起來，也不會擔心沒有文章、沒有原創文章了。

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

我的更新思路是，文章是先寫到SF平臺，利用Markdown快速寫好文章，然後更新到掘金，最後更新到微信公眾平臺，等到第二天定時群發訊息。

這個過程中，我SF的聲望已經突破了1.5K，掘金和SF的粉絲關注度也在不斷增加。每次看到又有新的粉絲和點贊收藏，就有繼續寫下去動力。因為掘金和SF不同於微信，都是互相未曾謀面之人，僅僅是因為文章的好壞而關注和收藏的。

相比於SF和掘金，公眾號的粉絲大部分是我的親朋好友。他們被我強制性的要求關注我的公眾號。其實他們中有很多人，根本就不知道我寫的是什麼，但是依然關注了公眾號。非常感謝他們的支援~

相比於粉絲數的增長，最開心的還是收到了真金白銀的打賞。只不過目前打賞一直沒有進到我的賬戶，不知道微信是怎麼弄的。其實這幾期裡面，給我打賞最多就是我爸媽了，我每寫的一篇文章他們都會下方默默的打賞我1元錢~ 可憐天下父母心啊~

不同於別的公眾號打賞，我設定的金額是1元、2元、5元，小額打賞。因為我覺得打賞金額過高，反而會嚇到一些朋友。能給我打賞一元，就已經非常開心了。

綜上所述，無論遇到的問題有多難，也會義無反顧的堅持下去。

以下是正文。

安裝

上一篇webpack入門學習手記（一），主要是介紹了webpack的核心概念，是整個學習過程的基礎知識。接下來按照官方文件給出的指南手冊依次進行。另外我會根據個人理解和操作過程，對文件內容有一些修改，如有出入請參考原文。

要想使用webpack，前提是必須安裝Node.js，另外請保證使用最新的穩定版本。否則Node的版本過低，會導致意想不到的問題出現。

官方手冊中給出了兩種安裝方式，一種是本地安裝（Local Installation）和全域性安裝（Global Installation）。在黃色的警告框處，明顯提示說，不建議全域性安裝，因為會將webpack鎖定到指定的版本，另外也會在不同的webpack版本的專案中，構建失敗。所以我們直接使用本地安裝即可。

首先安裝最新版本的webpack：

npm install --save-dev webpack
複製程式碼

因為使用的webpack v4 以上的版本，所以再安裝cli工具：

npm install --save-dev webpack-cli
複製程式碼

注意： 其實我在安裝的時候，使用的不是npm命令，而是cnpm。因為眾所周知的原因，國內下載安裝會比較慢甚至卡頓，所以使用了淘寶映象，可以自行百度下具體說明~ 以下文章中提到的所有npm命令地方，都請改成cnpm。

使用本地安裝的好處是，當升級專案時會比較方便。如果正確執行了上面的兩個命令，會在本地目錄多出一個node_modules目錄和一個package.json檔案。開啟package.json檔案，內容如下：

package.json

{
  "devDependencies": {
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  }
}
複製程式碼

這就是我們剛才安裝依賴。此時的package.json只有3行的程式碼，如果是第一次接觸webpack並且是第一次接觸node的朋友，會被手冊中接下來的程式碼產生疑問。因為接下來手冊新增了一段scripts程式碼。我們在專案中，新增這段程式碼之前，先來執行下面這個命令：

npm init
複製程式碼

這個命令會初始化一個新的package.json，因為我們在安裝webpack時生成了一個package.json，所以接下來的內容會直接追加到檔案中。

執行npm init這個命令之後，會向你提問一系列問題，如果覺得預設資訊沒有問題的話，直接回車就行。新生成的package.json類似如下：

package.json

{
  "devDependencies": {
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "name": "webpackstudy",
  "description": "webpack入門學習手記",
  "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": "git@git.dev.tencent.com:siberiawolf0307/webpackStudy.git"
  },
  "author": "siberiawolf",
  "license": "MIT"
}

複製程式碼

因為生成的dependencies內容過多，我直接省略掉了。此時就能找到指南手冊中的scripts了。我們在預設的test後面新增上官網中的程式碼即可。如下：

package.json

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.config.js"
  }
複製程式碼

補充： 在使用預設package.json是，會讓使用者填寫license。因為對開源協議比較陌生，我特意去查了一下使用何種開源協議。經過對比，我發現使用 MIT 協議是比較適合我的。MIT 協議是比較寬鬆的協議。此協議允許別人以任何方式使用你的程式碼同時署名原作者，但原作者不承擔程式碼使用後的風險，當然也沒有技術支援的義務。jQuery和Rails就是 MIT 協議。

上面的新增scripts.start，其實是執行webpack,並且執行的配置檔案是webpack.config.js。因為手冊進行到這裡，並沒有新增任何的 js 檔案，所以先不要執行這個命令~ 我們後面再來學習。

說明： 我將本小節程式碼託管到了騰訊雲開發者平臺，如果需要檢視這節內容，請查詢Installation目錄即可。

開始

如果你真的動手操作了一遍安裝步驟，並且是初學者，那麼請先刪除掉你資料夾下的package.json檔案。因為接下來按照手冊給出的示例，我們是在一個全新的目錄下進行操作的，請注意這一點。

因為我們在執行安裝小節是，肯定已經在一個工作目錄下，例如我的工作目錄是webpackStudy，所以文件中建立新目錄mkdir webpack-demo && cd webpack-demo省略掉。下面的程式碼示例都是在這個工作目錄下。

因為已經刪除掉了package.json檔案，接下來我們新生成一個：

npm init -y
npm install webpack webpack-cli --save-dev
複製程式碼

npm init -y，多了一個引數-y，就是說不用再詢問我們填寫引數了，直接使用了預設值。另外因為在本工作目錄下已經安裝過webpack了，此時執行的速度會非常快。

接下來，我們建立相應的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
  // 這段英文註釋的意思是說，在index.html檔案中已經引入了Lodash這個script標籤了，所以能正常使用
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());
複製程式碼

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>
複製程式碼

在工作目錄下建立index.html檔案，並建立src目錄，然後建立index.js檔案。檔案的組織形式如上。然後複製貼上html和js程式碼。

接下來我們修改一下package.json檔案，刪掉main入口，並設定private，防止意外發布程式碼。

package.json

{
 "description": "",
+   "private": true,
-   "main": "index.js"
}
複製程式碼

需要注意的是，在html頁面中，我們引入了Lodash這個js檔案。Lodash是一個JS實用工具庫，非常適合於遍歷陣列、字串和物件等。

在index.js檔案中，並沒有顯示的宣告需要引入Lodash。這樣就會造成以下幾個問題：

  • 沒有顯示宣告，index.js中的程式碼依賴於外部的擴充套件庫。
  • 如果依賴不存在，或者引入錯誤，應用程式無法正常執行。例如沒有引用Lodash。
  • 如果依賴檔案被引入了，但是沒有使用，瀏覽器就會下載無用程式碼。

如果我們使用webpack來管理JS呢？看看情況如何~

建立一個打包檔案

首先調整一下我們的工作目錄。建立一個dist目錄，用來存放壓縮和優化之後的程式碼。而我們之前建立的src目錄，用來存放原始程式碼。將之前建立的index.html檔案移動到dist目錄下。最終檔案結構如下：

project

webpackStudy
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js
複製程式碼

因為我們要在index.js中顯示宣告Lodash，所以需要先在專案目錄下安裝好，執行命令：

npm install --save-dev lodash
複製程式碼

注意這裡，我使用的是--save-dev引數。這樣會將Lodash新增到package.json的devDependencies屬性下。

接下來，通過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檔案，因為我們修改了依賴js的方式。

dist/index.html

<!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>
複製程式碼

最後，我們執行下面的命令：

npx webpack
複製程式碼

然後開啟index.html檔案，就會看到 Hello webpack。

因為我們在執行npx webpack時，沒有使用執行的配置檔案，所以使用預設值，也就是會在dist目錄下生成main.js。而這個打包之後的檔案，就在index.html引入。

如果開啟main.js，會發現Lodash已經在這個檔案中了。webpack已經幫我們新增好了。

指定配置檔案

在webpack4 中，不用指定配置檔案。但是這樣可擴充套件性就差了。所以我們建立一個webpack.config.js檔案。

在工作目錄下建立webpack.config.js檔案。內容如下：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};
複製程式碼

然後執行如下命令：

npx webpack --config webpack.config.js
複製程式碼

執行完之後結果跟之前一樣~

其實也可以不指定--config webpack.config.js這個引數。如果新增了webpack.config.js檔案，webpack會自動使用這個配置檔案。

但是假如檔案的名字不是webpack.config.js時，就需要用到--config這個引數了。尤其是當配置檔案被拆分成多個檔案時，會非常有用。

之前我們直接在命令列中執行的方式叫做CLI，現在通過配置檔案，具備更高的靈活性。可以指定loader、plugins 等。

NPM 指令碼

還記得在開始小節中，我們新增的scripts.start嗎？現在我們同樣的在package.json中新增一段指令碼，這樣我們每次執行程式是，只需要簡單呼叫指令碼即可。

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  }
複製程式碼

然後在命令列執行如下命令：

npm run build
複製程式碼

npm run build這段命令，就是制定package.json中的scripts指令碼，其中build就是我們剛才定義的內容。

說明： 我將本小節程式碼託管到了騰訊雲開發者平臺，如果需要檢視這節內容，請查詢Getting Started目錄即可。

以上就是指南手冊中的Getting Started部分。總結一下主要內容：

  • 安裝webpack和依賴的js工具庫Lodash
  • 通過預設配置和指定配置檔案，分別打包檔案
  • 使用NPM 指令碼執行webpack

下一篇筆記整理webpack官方文件的指南手冊剩餘部分，敬請關注。

（待續）

相關文章

webpack入門學習手記（一）

webpack入門學習手記（二）

webpack入門學習手記（三）

webpack入門學習手記（四）

相關文章