[Webpack] 前端打包工具(2)-安裝

F2E / Module bundler / Installation

圖片來源： https://webpack.js.org/

在 [Webpack] 前端打包工具(1)-前置 中一切準備就緒，終於可以真正進入主題了，開始來著手安裝 Webpack 吧!

安裝

01/ 建立新目錄

首先，新建一個 webpack-demo 目錄，並切換至該工作目錄。

// 名稱可自訂
mkdir webpack-demo && cd webpack-demo

02/ 初始化 npm，產生 package.json

輸入下方指令，接下來會要求輸入幾項專案的資訊(專案名稱、版本必填，其他選填)，可按 Enter 鍵先略過。

npm init
npm init -y (略過輸入專案資訊的步驟)

完成後，會自動生成一個基本的 package.json 檔案。
※ package.json 檔案也可以手工編寫，不使用 npm init 命令。

▎專案目錄

  webpack-demo
﹢   |- package.json

▎package.json

開啟 npm-package.json 所顯示的初始內容

關於 npm-package.json

位於專案目錄下與專案配置相關的重要檔案，其中包括專案資訊(包含名稱、版本、描述、腳本 …)以及所安裝的相依套件。基本屬性說明：

👉 專案資訊相關

name (必填)
專案名稱，預設是目錄名稱，這裡為 webpack-demo。

version (必填)
專案版本，預設為 1.0.0。

main
專案切入點/主入口檔案，預設為模組根目錄下的index.js。
※ 比方說有個 foo 模組，當我們require('foo')時就會載入這個 js 檔。

scripts
屬性是一個物件，key 是生命週期事件( start、test、stop 等)，value 表示所要執行的命令。在預設屬性中，表示我們若要進行測試 test 指令時，可以輸入npm run test 來執行該命令：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}

author
專案作者 author-name <author@email.com> (author-website)。

license
專案協議/授權，如ISC、MIT。( 查詢協議列表)

description
專案描述，值為字符串 project description... 。

👉 專案套件相關
在 npm 安裝套件時，使用相應的參數，將其寫入package.json。

dependencies
專案運行所依賴的套件，用在已發布的環境，如 jQuery、Vue.js。
屬性是一個物件，key 是套件名稱， value 表示版本範圍。

devDependencies
專案開發所依賴的套件，用在開發中的環境，如 webpack、cli 相關、loaders。
屬性同 dependencies。

※例：

npm install [package] --save
npm install [package] --save-dev
--save     會將套件寫入 dependencies。可簡寫為 -S。
--save-dev 會將套件寫入 devDependencies。-dev 可簡寫為 -D。

目前的 package.json，其中 dependencies & devDependencies 則會在安裝套件時被寫入(框線處)。

👉 了解更多 npm-package.json 屬性資訊

03/ 安裝 webpack 與 webpack-cli

有了 package.json，現在我們可以透過npm install [package]的指令來安裝所有的套件。

# 安裝 webpack 與 webpack-cli (webpack 的 Command Line)：

npm install webpack webpack-cli --save-dev
// or
npm i webpack webpack-cli -S -D

安裝成功會顯示套件以及安裝版本 (框線處)

安裝完畢後，我們來看看有甚麼變化：

▎專案目錄
根目錄下自動新增一個 node_modules 目錄及 package-lock.json 檔案。

  webpack-demo
+   |-/node-modules
+   |-package-lock.json
    |-package.json

👉 node_modules 目錄
每個由 npm 安裝的套件皆會存放於此。剛剛安裝的 webpack 與 webpack-cli 都在該目錄中。

👉 package-lock.json (重要勿刪)
鎖住套件版本，使用npm install來安裝專案中所有套件時，不會因為套件版本的更新而導致專案發生錯誤。

※ npm install在 node_modules 目錄被刪除或是搬移專案需要重新安裝套件時都非常有用。

▎package.json
devDependencies 開發依賴中新增了套件以及安裝版本。

devDependencies 顯示安裝的 webpack 與 webpack-cli (框線處)

webpack 4.41.2
webpack-cli 3.3.10

相關文章

[Webpack] 前端打包工具(1)-前置
[Webpack] 前端打包工具(2)-安裝
[Webpack] 前端打包工具(3)-概念

官方文檔

安装

參考資料

Webpack教學 (一) ：什麼是Webpack? 能吃嗎？
package.json文件 — JavaScript 标准参考教程（alpha）