新手向 Webpack 完全攻略 (2) – 打包你的 JavaScript

By Roy Huang・May 3 2017・技術文章

在這篇文章，我們將開始示範簡單的 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) 的結果），代表我們大功告成了！

[本章最後的成果](https://github.com/beersheep/webpack-sample/tree/2-simple-config)

此分享轉載自五倍 Rails 工程師 Roy Huang的開發筆記

用 Postal 無痛架設 Mail Server

新手向 Webpack 完全攻略 (1) – Webpack 簡介