Hi 大家好

前幾天我們介紹了 webpack 的編譯功能

包含如何使用 webpack 這個指令

今天我們要來進入 webpack 多樣化的地方

使用設定檔來設定 webpack

在儲存時自動編譯

現在我們每次編譯時，都需要重新輸入 webpack app.js build.js

這樣一直做重複的動作可能會讓人覺得很枯燥

幸運的是，webpack 提供了一個設定檔 webpack.config.js

有了設定檔之後

我們每次都只需要輸入 webpack ，不帶任何參數

他會自己去讀 webpack.config.js 看有沒有任何設定

設定 webpack.config.js

這邊我們一樣去 google 搜尋 webpack config

值得注意的是，這邊我們要選擇 webpack 第二版 的文件

所以請選擇 https://webpack.js.org/configuration/ 這個連結

文件點進去後，會發現官方提供的 webpack.config.js 非常的冗長

(webpack 其中一個問題是，滿多文件都不友善的)

不過這邊不用擔心，我們會做些修改來用

先在你的專案創建一個 webpack.config.js

接著，將官方文件的範例更改成這樣的內容

module.exports = {
  entry: "./app.js",

  output: {
    path: './',
    filename: "build.js"
  }
}

這邊就是 webpack 最基本設定檔的樣子了

webpack.config.js 解釋

我們先一行一行來解釋

1. module.exports 這是我們前幾天介紹過 CommonJS 的模組化語法
   基本上意思是，module.exports 這個物件所帶值
   就是所有你想被外部程式讀到的

   在這裡，我們這個 webpack.config.js 有辦法被外部讀到的欄位有 entry output path filename

2. entry 代表著編譯前檔案的檔名
   這邊我們設定 ./app.js，代表我們要使用執行 webpack 這個指令時
   同個路徑底下的 app.js 來進行編譯

3. output 代表編譯後輸出的檔名，這裡 webpack 分成 path 和 filename 兩個欄位做設定
   path 編譯結果的路徑
   filename 編譯結果的檔名

   所以之後編譯的結果會在 path/filname

使用 webpack.config.js

要執行的話，直接打入 webpack 即可

webpack.config.js 這個檔名是 webpack 官方預設會去讀的檔案

不然，如果你有許多個 webpack 設定檔，你可以使用 --config 後面接設定檔檔名

來指定要使用哪個 config

像是 HACKMD 這個開源專案的原始碼 https://github.com/hackmdio/hackmd

就提供了幾種 webpack 的 config 檔

你可以使用像是 webpack --config webpack.production.js 來做編譯

執行

我們這裡為了簡單，直接打入 webpack 執行即可

執行完後，會發現錯誤

錯誤內容是

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "./" is not an absolute path!
-> The output directory as **absolute path** (required).

偵錯

碰到這樣的問題時，如果真的不確定他的意思

可以直接把錯誤訊息全部複製下來

丟去 Google 搜尋

點進第一篇，會發現已經有人碰到過了

還在 GitHub 上發了一個 issue(問題回報)

基本上他的意思是 webpack 2.3.1 後

你的 output 這個參數，必須是絕對路徑

絕對路徑 vs 相對路徑

詳細內容可以參考 https://en.wikipedia.org/wiki/Path_(computing)

絕對路徑: 不論你在電腦的哪個資料夾裡，這個路徑指向的地方都絕對不變
(像是: /Users/AlxTz/Desktop)

相對路徑: 會根據你在電腦的不同資料夾，而指向不同的地方
(像是 ./Desktop, ../app)

如何修改

這邊，我們使用的 ./ 是一種相對路徑

因為 ./ 代表現在所在的資料夾

要改成絕對路徑，可以使用 pwd 印出當前的路徑(印出的路徑應該會長得跟我不一樣)

為 webpack.config.js 做修改

再執行 webpack 一次後

可以看到他成功地編譯出 build.js 了

這樣

這樣我們就有辦法來使用設定檔編譯 app.js 了

明天

但是這樣寫死的路徑

對於專案開發，當然非常不友善
(不同電腦上所使用的路徑會不一樣)

所以我們明天

會詳細的帶到如何設定一份好用的 webpack.config.js

讓大家對於官方的範例都有深刻的理解

接下來，再來解析 vue-cli 到底做了哪些設定

我們明天見！