iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 24
0
Modern Web

使用 webpack 模組化你的程式碼,讓人生更美好。系列 第 24

<24 - 心法 5 - 再探設定檔> webpack 設定檔中的 Public Path

今天想要回過頭來講一下基本觀念 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);
}

應該有看出差別了,希望對大家有所幫助啊。/images/emoticon/emoticon58.gif


明天會來階段複習一下,敬請期待喔。/images/emoticon/emoticon41.gif


上一篇
<23 - React 上陣 02> Webpack - Babel - React 聯手 - 撰寫多個元件並匯入至某個JS
下一篇
<25 - 溫故知新 02> 階段複習過去所瞭解的 webpack - 可下載目前的原始碼
系列文
使用 webpack 模組化你的程式碼,讓人生更美好。30

尚未有邦友留言

立即登入留言