Start a Simple Project Using Webpack

node.js, npm, webpack

何謂 Webpack ？

粗略來說， Webpack 就是個模組整合工具。在撰寫網頁應用程式時，我們常會用到一堆模組，或內嵌一堆程式（樣式檔、程式庫、應用框架等）。這些散亂的檔案不易管理，可能會在無意間引發一些問題。

例如在 index.html 內引入一串 <script> ，然後第三個 <script> 會用到第二個 <script> 內的函式，但是我們卻不小心把引入順序排反了。

或者是檔案在執行的時候要依序載入二十幾個 <script> ，比起直接載入一個檔案浪費了很多時間等…

而 Webpack 可以將這些雜亂（甚至不同語言）的引入檔模組化，並整合成一個結構簡易的專案。

運作原理

Webpack 會以遞迴的方式迭代所有的相依模組，並將這些模組之間的相依關係記錄成一棵樹狀結構圖，然後依照這個圖將所有會用到的模組打包、整合成一個精簡的專案。

建置步驟

建立專案資料夾並初始化為 NPM 專案

1
2
3
$ mkdir <專案資料夾名稱>
$ cd <專案資料夾名稱>
$ npm init -y

安裝 webpack （這裡以區域安裝）

1
npm i -D webpack

建立專案結構如下：

1
2
3
4
5
6
7
8
<專案資料夾>
	├─ package.json
	├─ package-lock.json
	├─ webpack.config.js				# webpack 設定檔
	├─ /dist										# webpack 輸出資料夾
	│	└─ index.html
	└─ /src											# webpack 輸入資料夾（開發專案處）
		└─index.js

webpack.config.js 設定檔設置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			}
		]
	},
	plugins: [
		new CleanWebpackPlugin(['dist']),
		new HtmlWebpackPlugin({
			title: 'My first Webpack Project'
		})
	],
};

設定檔分為幾個部分：

entry （進入點）：

可以想成是整包肉粽（模組）的的線頭， webpack 會從被當成 entry 的檔案開始向下找尋關聯的模組。

output （輸出）：

可以設定經過打包後的檔案如何輸出

  • filename ： 代表打包後的檔名
  • path ： 代表放置打包檔案的資料夾路徑

Loader （載入器）：

在模組化的專案中，程式碼是以匯入、匯出的方式來建立關聯的。在 Webpack 中，匯入、匯出只認得 Javascript 程式碼， Loader 負責把匯出的東西轉成 Javascript 程式碼，讓 Webpack 讀得懂。

在設定檔內， Loader 以陣列的方式放在管理打包模組規則的 module.rules 內。

常用的幾個參數如下：

  • test ：指定 Loader 作用的檔案類型，假設匯出的檔案符合該類型， Loader 會編譯。
  • use ：指定使用的 Loader ， 如果有多個 Loader ，作用順序是從尾巴開始。

所以在上面的設定中，只要檢查到匯出為 css 檔，就會先用 css-loader 編譯，再用 style-loader 編譯。

plugin （外掛）：

外掛包山包海，範圍很廣。

使用外掛的方式，必須先在設定檔開頭先匯入外掛。
接著在 plugin 的設定中用 new 將外掛實例化成物件來使用。
要以實例化的方式是由於一個外掛可能被重複許多次，實例化讓外掛在不同的使用情形下儲存不同的設定。

在這裡使用的 CleanWebpackPlugin ，用處為每次打包時會先清空原來的打包資料夾。
而 HtmlWebpackPlugin 則是每次打包時會自動生成一個新的 index.html 。

下載相關的模組

剛剛提到的 Loader 、 Plugin 都是需要下載的！

1
$ npm i -D style-loader css-loader html-webpack-plugin clean-webpack-plugin

在 package.json 設置命令群組：

1
2
3
"scripts": {
  "build": "webpack",
},

接著就能夠實作一個簡單的範例並用我們設置好的 Webpack 打包了！

實作打包流程

下載 Jquery 模組

1
$ npm -S jquery

在 src/index.js 輸入以下內容：

1
2
3
4
5
6
7
8
9
10
11
12
import $ from 'jquery';
import './style.css';

function component() {

	let element = $('<div></div>').text('Hello Webpack!');
	$(element).addClass('hello');

	return element;
}

$('body').append(component());

這步是利用匯入的 JQuery 模組來產生一個 DOM。

接下來為該 DOM 新增樣式。
在 src/style.css 輸入以下內容：

1
2
3
.hello {
  color: green;
}

最後開啟終端機，移動到專案目錄，運行設置好的打包命令： npm run build ，在 dist 目錄下會產生打包後的 index.html ，順利的話，用瀏覽器開啟便是打包後的結果。