在這篇文章,我們將開始示範簡單的 webpack 設定以及實際打包 JavaScript。讀者們可以按照下列的步驟操作,或是連結到頁尾的 Github Repository。

首先,建立一個專案資料夾。

$ mkdir webpack-sample

接著,我們用下面這這個指令生成 package.json 來管理 pacakge

$ cd webpack-sample
$ npm init

為了示範,我們創一個 src 的資料夾,並在裡面新增兩個 Javascript

$ cd webpack-sample
$ mkdir src
$ touch src/index.js
$ touch src/sum.js

我們希望讓 sum.js 可以用來定義一個加法的函式,然後從 index.js 來呼叫它。

const sum = (a, b) => a + b;
module.exports = sum;

接著我們要在 index.js 裡面 import sum 這個函式,就可以在 index.js 裡面使用。

const sum = require('./sum');
const total = sum(2, 3)
console.log(total);

require 後面用的參數是相對路徑,前面一個點代表的是 index.js 當前的資料夾。
我們將 sum import之後,接著用 console.log 來輸出 sum 的結果。到這個階段我們
已經完成 JavaScript 的準備,接著讓我們來開始安裝並設定 Webpack。

webpack 的資料夾當中輸入 npm install --save-dev webpack@2.2.0-rc.
這個指令的意思是我們要從 npm 安裝 webpack,指定版本 2.2.0-rc.0,而 --save-dev
則是代表我們是在開發環境下使用這個 Package。

接著我們必須創建一個 Webpack 的設定檔,檔案名稱為 webpack.config.js,之後 webpack 啟動的時候會來這個檔案尋找相關的設定。

    const path = require('path');

    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
      }
    }

我們會先載入的一個 Package 叫 path,他可以給我們一些有用的 Helper。接著我們要把這個設定檔輸出給 webpack 使用。設定檔是一個物件,裡面有兩個重要的 Property:

  • entry: 要求字串,載入點的相對路徑。
  • output: 要求一個物件。
    • filename: 要求字串,最後輸出的檔案名稱。
    • path: 要求路徑,最後輸出的絕對路徑。

entry 會是你整個 App 的 JavaScript 載入點,這份 JavaScript 裡面不會有任何的 Export,只會有許多的 Import。Webpack 會從這份 JavaScript 開始啟動,然後遇到 Import 的模組就開始去找其他的 JavaScript,直到所有被利用的 JavaScript 都被成功連結再一起為止。慣例我們會將載入的檔案取名為 index.js

接著 output 被分成兩個 Property。首先是最後輸出的檔案名稱,再來是存放的路徑。我們這邊用了 path 的 Helper。首先這個 resolve 的函式是為了不管在 Windows 或是 Unix 上都可以正確解析路徑,而 __dirname 則是這個檔案當前的資料夾名稱,並且與後面的參數結合成路徑。因此,假設我們的本地路徑是 ~/webpack-sample,那最後輸出的檔案路徑就是 ~/webpack-sample/build/bundle.js

接著,我們會希望新增一個 command script 來跑 webpack。我們可以在 package.json 裡面新增 Script。

script: {
    build: "webpack"
  }

這個 Script 告訴我們,我們之後可以跑 $ npm run build ,就會執行 Webpack。有些人會把 Webpack 裝在全域,只要打 Webpack 就可以啟動。但這樣的缺點是,你無法指定使用的 Webpack 版本,因此,假設你 Fork 下來的專案與你電腦中使用的版本不相同的話,可能會造成錯誤。而用這樣的方式,它就只會用這個專案所指定的 Webpack 的版本。

接著我們可以執行 $ npm run build ,會看到一串 Webpack 的訊息,假如沒有出現任何錯誤,我們可以找到 build/bundle.js 這個檔案。我們為了確認這個編成的 JavaScript 是否能正常運作,必須生成一個 html 檔案並加入這個 JavaScript.

<html>
   <body>
    <script src="build/bundle.js"></script>
  </body>
</html>

接著打開這個檔案,如果在瀏覽器的 console 中看到 5 (記得嗎?我們要在 console 中印出 sum(2, 3) 的結果),代表我們大功告成了!

本章最後的成果