今天想要回過頭來講一下基本觀念 Public Path，這是跟設定檔(webpack.config.js)有關的東西，讓你可以針對你的 assets 指定 base path，在設定檔裡會寫成 publicPath。

一般來說，若 assets 檔案都是在本機端開發，其實也未必一定要設定 publicPath，就像前面所寫的所有文章，我都沒有加上 publicPath 這個設定，但什麼情況會需要用到呢？那就是當你的 assets 相關檔案，在 production 的環境中，是用 CDN 在取得的，那麼透過 publicPath 就是個好的解法。

修改 webpack.config.js

這裡順便也講個小技巧，因為在後端程式來說，我不擅長 NodeJS，但有時我會想從 Terminal 中，直接輸出某個值來看，我先修改 webpack.config.js 如下：

…

const ASSET_PATH = process.env.ASSET_PATH || 'http://cdn.example.com/';
console.log(ASSET_PATH);

module.exports = {
  …
}

新增以上的 ASSET_PATH，然後透過 console.log(ASSET_PATH) 來查看該值，直接開啟 Terminal，並在專案資料夾的路徑中，執行：

$ node webpack.config.js

可以看到輸出的結果是：

http://cdn.example.com/

process.env.ASSET_PATH 是針對不同環境，可自行設定的值，我沒有設定，所以它會是 undefined，故 ASSET_PATH 的值會是 http://cdn.example.com/。

再修改 webpack.config.js，加上 publicPath：

module.exports = {
  …
  output: {
    …
    publicPath: ASSET_PATH
  },
  …
}

好，這到底差在哪裡呢？

建立測試檔

我先來建立基本的測試檔案，在專案資料夾中建立 ./app/test.png，再建立 ./app/img_css.css，內容如下：

body{
  background-image: url("./test.png");
}

然後在 ./app/component_collection.js中，加入：

…
import "./img_css.css"

執行 webpack 指令

按照目前的 webpack.config.js 檔的設定，執行 webpack 指令後，會產生 ./dist/assets/css/component_collection.css，內容如下：

body{
  background-image: url(http://cdn.example.com/test-37805d3e78d3d5edc40d43d62dc9ebf2.png);
}

有看到了嗎？路徑就會變成是在 publicPath 中所設定的路徑了。這在你的 assets 相關檔案是在 CDN 的環境當中的話，非常有用，也是個很好的解法。

反之，以此例來說的話，若我沒有設定 publicPath 的話，那 ./dist/assets/css/component_collection.css 的內容會是：

body{
  background-image: url(test-37805d3e78d3d5edc40d43d62dc9ebf2.png);
}

應該有看出差別了，希望對大家有所幫助啊。

明天會來階段複習一下，敬請期待喔。