Webpack教學 (一) :什麼是Webpack? 能吃嗎?

曾幾何時Web前端界寫的不再是單純html、css、js,許多Preprocess(前處理)工具跟框架不斷的冒出來,不斷拉高前端門檻,導致出現了許多斷層,可能你聽過 es6、pug、sass、vue、reactjs (沒聽過的可以參考之前我寫的另外一篇文章 – 在開始寫Code之前?) ,這些東西可以說是現在前端界必須要了解的,可是問題來了!?

即使寫了這些Preprocess,但是瀏覽器還是無法識別,看不懂啊,所以也出現了許多前端自動化的工具出來,編譯這些Preprocess然後打包成瀏覽器看得懂的內容,例如我們等一下會仔細提到的webpack、或是不太會提到的gulp、Parcel等……

或許你打開104或是其他找工作的平台都會寫說需要有webpack打包的使用經驗或是其他第三方的自動化工具使用經驗,但是到底什麼是webpack? 到底webpack可以幫我們做什麼事情?

其實webpack幫我們做的事情很簡單,就是幫我們編譯我們的Preprocess成瀏覽器看得懂的內容然後打包成一包的完成檔案然後拿去server 上傳上去。

專案結構

一般我們的專案會有兩個很重要的資料夾src與dist,這兩個資料夾是什麼?

  1. src : 專門放我們Preprocess的檔案,包括es6、pug、sass、vue、jsx等檔案,這個資料夾不會丟上去server部署。
  2. dist : 經過webpack編譯打包後,產生出瀏覽器看得懂的html、css、js,要部署也是這個資料夾去部署。

1_Hj_YLz3yFPXrsxX7mwxhOw.png這是我某專案的資料夾結構

會看到src的資料夾裡面有許多資料夾,這個是我自己的分類方式,每個人的都多少會不一樣,僅供參考啦~

像這樣的開發方式就像是現代前端的開發方式,我們就可以專心的用去多好用的Preprocess,不用去管最後的編譯成果!

前面說了這麼多觀念,接下來我們來說些比較入門偏技術的部分~

首先我們來看一下 webpack 的官網,官網還有中文的翻譯貼心很多…

1_YmNJ7Ve6PgWxX0yc7x_m5A.pnghttps://webpack.js.org/

我們可以從官網首頁的這張圖看到整個webpack的核心概念,「注入」

什麼是「注入」?

webpack是一個以自己編寫設定檔然後透過指令去驅動的一個自動化工具,所有的動作都是透過自己寫的規則去做編譯,我們必須透過javascript的引入語法讓webpack知道需要它幫忙編譯什麼東西,例如pug或是sass等等……
所以我們會有一支俗稱進入點的js專門注入那些Preprocess,讓那些Preprocess可以通過這個進入點的js讓webpack去編譯它,進而打包到dist資料夾。

1_rna7_6qHSzp9uABxE1slgA.png我的某專案的進入點的js

不熟的朋友不要一開始被上面這張圖嚇到,這只是在舉例當專案越大的時候,我們會注入的東西也會越多!

我們先來看一下簡單的webpack應該怎麼安裝,首先webpack是在nodejs上面所運行的,所以大家的電腦都一定要安裝nodejs (官網),這邊我安裝的版本是LTS的版本(我是用nvm進行安裝的不過如果不熟的朋友可以直接從官網下載),下載安裝好了開啟你電腦的終端機,我是用mac的,window的朋友可以開啟命令提示字元輸入

1_Dj-Yn4wtJZecUVEk8RFmwg

 

 

> node -v

 

他會顯示你目前安裝好的nodejs版本,檢查你是否有正確安裝nodejs

1_tz9sggN6g4yfKoIMzB1TkA.png

我的版本是V8.9.1

接下來在開啟一個新的資料夾(名字隨便取),然後路徑指定到剛剛新增的資料夾

1_TiSXQeS7je9TqLf307xV4w.png

我把資料夾放在桌面,記得不要有中文喔

終端機下面依序輸入以下指令來安裝webpack
(這邊我們透過nodejs的套件管理工具npm來進行安裝,安裝好nodejs後及安裝好npm,所以可以直接使用npm指令來安裝webpack)

> npm install webpack webpack-cli --save-dev

1_2MGSaH7gRzHEsPf46M9I3w.png

安裝好就會看到以下內容代表已經安裝好了,這邊安裝好的是新的4.6.0版本

接下來我們要來用npm來創建一個package.json輸入

> npm init

1_Yi9Bp8FCmrqn0I2-lE7ZAA.png

中間會問你一些問題不過都可以先enter一直跳過,之後再來看

他會幫你的資料夾下面創立一個package.json,所以現在你的專案資料夾裡面應該會有一個資料夾跟兩個json檔案

node_modules :就是我們透過npm下載下來的套件跟工具都會放在這個資料夾裡面,剛剛我們下載下來的webpack還有跟webpack有關係的套件都會在這資料夾裡面

package.json:關於這整包專案所有的資訊,包含我們安裝的套件版本,專案版本,npm指令都可以在這個json檔案裡面找得到,之後要搬移專案重新安裝套件也需要靠這個json檔案

package-lock.json:package-lock.json是npm5版本新增的,是專門紀錄package.json裡面更細節的內容,例如安裝的套件的詳細版本,或是確認你的dependency (依賴)是被哪個函式庫所要求的等等,不過這個我們通常就放著不太會管它。

看到這邊是不是覺得怎麼我只是想使用一個webpack怎麼這麼麻煩,還有要知道這麼多東西……

接下來我們開始要來寫webpack的設定檔了,在專案資料夾下創立一個webpack.config.js跟index.js的檔案

index.js就是我們的進入點

接下來我們來寫webpack.config.js

螢幕快照 2018-11-08 下午6.05.12

entry:是我們的進入點,我指定路徑是 index.js
output:打包輸出後的檔案我的檔名在index後面加了個bundle,來確認它是打包過後的檔案。

接下來在index.js內隨便寫個js語法

> console.log("Hello")

然後我們在package.json之中的script的部分加入 “build”: “webpack”

螢幕快照 2018-11-08 下午6.06.57.png

npm 會去調用webpack指令

然後開終端機輸入

> npm run build

1_isIi3PLXso-elen9k38U5w.png

資料夾多了個我們編譯打包過後的檔案 index.bundle.js

到這邊恭喜你就成功的打包了你第一個 js 檔案,所以透過webpack的轉換我們可以寫許多各式各樣的Preprocess來輔助我們開發網頁,當然webpack.config.js的設定還不只那一點點,還有更多強大的功能跟使用方式,不過那就留到之後再說吧,目前想讓入門的人有個基礎觀念,跟能稍微簡單地用一下~

最後

不管最後怎樣的工具都是為了幫助你再開發上面更加順利而且更順暢,重要還是你的前端能力的基礎,如果看了有其他問題也都可以在下面留言給我來討論~

工商時間

線上課程 – 超越入門!Webpack 前端自動化開發

線上課程 – JavaScript & TweenMax 動態特效速成實戰

 

本文轉載自 Mike ,原文標題為:Webpack教學 (一) :什麼是Webpack? 能吃嗎?

作者: YOTTA

YOTTA是台灣擁有最多專業老師的線上募資課程平台。當你對生活感到不足、覺得自己還有更多可能,卻苦無更多充分的時間進修額外專長、自我提升,YOTTA 提供了通往不同領域的階梯,讓你用最短的時間,創造最大的可能。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s