Hello 大家好

在我們昨天安裝完 webpack ，以及介紹完功能後

今天我們要進入，實際建一個 Project，以及作設定了

新增基本檔案

我們先新增一個 app.js

這邊內容不用很複雜

console.log('Iron Man Rock!')

接下來

還記得 webpack 這個指令怎麼使用嗎？

第一個參數 app.js 是編譯前的檔案
第二個參數 build.js 是編譯後的檔名

webpack app.js build.js

編譯完成！

編譯完的 build.js 會長這樣

新增一個 module

我們這邊來創建另一個模組來做示範

這邊我們來新增一個 module，叫做 alex.js

在這個 module 裡面

我們可以設定這個模組要釋出什麼內容

exports.name = 'Alex Tzeng'
exports.skills = ['HTML', 'CSS', 'JS']
exports.location = ['Taiwan']

將剛剛寫的 module 引入 app.js

這邊，還記得前幾天介紹的 require() 嗎？

使用 require() 引入模組時

如果是要引入 npm 安裝的 module，就直接輸入模組的名字(例如: require('jquery'))

這邊我們如果是要加入自己寫的模組的話

就要使用相對路經

require(./alex.js) 代表引進同個資料夾底下的 alex.js

這邊我們使用幾個 ALEX 裡面的變數

compile

有印象的應該知道，我們每次寫完 code 是要編譯的

執行

這邊我們創一個 index.html 來引入 build.js

實際打開，就可以看到我們模組化的成果了！

結果

如果我們打開原始碼來看

可以看到，全部的 JavaScript 我們只使用到 build.js 一個檔案

使用 webpack 來編譯我們的 JavaScript ，總共有幾個好處

1. 當我們有多個檔案時，不必每個都引入，只要使用 build.js 即可
   

2. 我們全部的檔案都包在 build.js 裡面
   要存取網頁時所需要的請求變少

3. 使用模組化的開發方式，我們可以完全避免全域變數的衝突

明天

就這樣了！

我們明天將會介紹如何使用 webpack.config.js 來設定 webpack