webpack
結合 vuejs
或 reactjs
開發過程中圖片的處理方法。
我的需求
專案打包之後(假定輸出目錄為 dist
),除了 index.html
,將所有的靜態資源上傳至 cdn
,而並非打包之後所有靜態資源都在應用伺服器上。
index.html
中的圖片
因為是 SPA,模版頁面唯一要處理的圖片就是 favicon
,這個資源在 IE 10
及以下瀏覽器只需要在 dist
根目錄下存在 favicon.icon
檔案(名稱、字尾固定)即可,這種方式已經廢棄,更好的做法是使用 link
標籤引用,如:
<link rel="icon" sizes="192x192" href="/path/to/icon.png">
複製程式碼
處理這個圖片,我嘗試了三個方法:
1.html-webpack-plugin 的 favicon
屬性配置
不適合我。
它會將檔案輸出至 dist
根目錄下,與 index.html
同級,引用的是本地圖片,而非 cdn
圖片。
2.favicons-webpack-plugin
不適合我。
很強大,能根據你給的圖片,生成所有型別的 icon
圖示,問題有兩個:首先是依賴了 phantomjs
,牆外的站點,你懂得;再者引用的依舊是本地圖片。
元件實現
適合我。
vuejs
的 vue-head 元件,reactjs
的 react-helmet 元件,可以配置 link
方式的 favicon
。圖片打包上傳 cdn
之後,頁面的圖片地址也為 cdn
地址。
其它
如果你的模版頁面有其他諸如 src
圖片引用,可參考 html-withimg-loader
vuejs 專案中圖片處理
前提:使用 vue-loader v15,webpack
配置好 url-loader
和 alias
:
module.exports = {
// ...其他配置
modules: {
rules: [
{
test: /\.(jpe?g|png|gif)(\?.*)?$/,
use: 'url-loader?limit=1024&name=statics/img/[name]-[hash:5].[ext]',
exclude: /node_modules/,
},
]
},
resolve: {
alias: {
Images: path.resolve('public', 'statics', 'img'),
},
},
// ...其他配置
}
複製程式碼
template
中使用
<img src="~Images/logo.png">
<img :src="require('Images/logo.png')"> // 注意 v-bind
複製程式碼
有個問題我目前沒有解決(精簡程式碼),還請大神指教:
// 無效,提示無法找到這個資源
<img :src="require(`${img}`)">
data() {
img: 'Images/logo.png'
}
複製程式碼
// 有效
<img :src="require(`Images/${img}`)">
data() {
img: 'logo.png'
}
複製程式碼
已解決,官網對 require 的說明: A context is created if your request contains expressions, so the exact module is not known on compile time.
樣式表中使用
貌似無法使用 alias
,只能使用 ~
和相對路徑:
body {
background: url(Images/logo.png); // alias,錯誤
background: url(/Images/logo.png); // 有效,但是引用本地檔案
background: url(~Images/logo.png);
background: url(../../statics/img/logo.png);
background: url(./../../statics/img/logo.png);
}
複製程式碼
以 . 開頭,將會被看作相對的模組依賴,並按照你的本地檔案系統上的目錄結構進行解析
。
reactjs 中圖片處理
前提:webpack
配置好 url-loader
和 alias
使用
不管是元件中還是樣式表中,都可以使用 alias
和相對路徑:
require('Images/logo.png');
require('../../statics/img/logo.png');
require('./../../statics/img/logo.png');
複製程式碼
body {
background: url(Images/logo.png);
background: url(../../statics/img/logo.png);
background: url(./../../statics/img/logo.png);
}
複製程式碼
最後
./
可有可無,相對路徑是以當前的檔案為基礎,注意 ../
層數問題;不要以 /
開頭,因為最終都是引用的本地圖片。
如有謬誤,懇請斧正。