webpack结合reactjs、vuejs项目中图片处理
我的需求
項(xiàng)目打包之后(假定輸出目錄為 dist),除了 index.html,將所有的靜態(tài)資源上傳至 cdn,而并非打包之后所有靜態(tài)資源都在應(yīng)用服務(wù)器上。
index.html 中的圖片
因?yàn)槭?SPA,模版頁(yè)面唯一要處理的圖片就是 favicon,這個(gè)資源在 IE 10 及以下瀏覽器只需要在 dist 根目錄下存在 favicon.icon 文件(名稱(chēng)、后綴固定)即可,這種方式已經(jīng)廢棄,更好的做法是使用 link 標(biāo)簽引用,如:
<link rel="icon" sizes="192x192" href="/path/to/icon.png"> 復(fù)制代碼處理這個(gè)圖片,我嘗試了三個(gè)方法:
1.html-webpack-plugin 的 favicon 屬性配置
不適合我。
它會(huì)將文件輸出至 dist 根目錄下,與 index.html 同級(jí),引用的是本地圖片,而非 cdn 圖片。
2.favicons-webpack-plugin
不適合我。
很強(qiáng)大,能根據(jù)你給的圖片,生成所有類(lèi)型的 icon 圖標(biāo),問(wèn)題有兩個(gè):首先是依賴(lài)了 phantomjs,墻外的站點(diǎn),你懂得;再者引用的依舊是本地圖片。
組件實(shí)現(xiàn)
適合我。
vuejs 的 vue-head 組件,reactjs 的 react-helmet 組件,可以配置 link 方式的 favicon。圖片打包上傳 cdn 之后,頁(yè)面的圖片地址也為 cdn 地址。
其它
如果你的模版頁(yè)面有其他諸如 src 圖片引用,可參考 html-withimg-loader
頁(yè)面 Head 大全
vuejs 項(xiàng)目中圖片處理
前提:使用 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'),},},// ...其他配置 } 復(fù)制代碼template 中使用
<img src="~Images/logo.png"> <img :src="require('Images/logo.png')"> // 注意 v-bind 復(fù)制代碼有個(gè)問(wèn)題我目前沒(méi)有解決(精簡(jiǎn)代碼),還請(qǐng)大神指教:
// 無(wú)效,提示無(wú)法找到這個(gè)資源 <img :src="require(`${img}`)">data() {img: 'Images/logo.png' } 復(fù)制代碼// 有效 <img :src="require(`Images/${img}`)">data() {img: 'logo.png' } 復(fù)制代碼已解決,官網(wǎng)對(duì) require 的說(shuō)明: A context is created if your request contains expressions, so the exact module is not known on compile time.
樣式表中使用
貌似無(wú)法使用 alias,只能使用 ~ 和相對(duì)路徑:
body {background: url(Images/logo.png); // alias,錯(cuò)誤background: url(/Images/logo.png); // 有效,但是引用本地文件background: url(~Images/logo.png);background: url(../../statics/img/logo.png);background: url(./../../statics/img/logo.png); } 復(fù)制代碼以 . 開(kāi)頭,將會(huì)被看作相對(duì)的模塊依賴(lài),并按照你的本地文件系統(tǒng)上的目錄結(jié)構(gòu)進(jìn)行解析。
reactjs 中圖片處理
前提:webpack 配置好 url-loader 和 alias
使用
不管是組件中還是樣式表中,都可以使用 alias 和相對(duì)路徑:
require('Images/logo.png'); require('../../statics/img/logo.png'); require('./../../statics/img/logo.png'); 復(fù)制代碼body {background: url(Images/logo.png);background: url(../../statics/img/logo.png);background: url(./../../statics/img/logo.png); } 復(fù)制代碼最后
./ 可有可無(wú),相對(duì)路徑是以當(dāng)前的文件為基礎(chǔ),注意 ../ 層數(shù)問(wèn)題;不要以 / 開(kāi)頭,因?yàn)樽罱K都是引用的本地圖片。 如有謬誤,懇請(qǐng)斧正。
轉(zhuǎn)載于:https://juejin.im/post/5b359656e51d4558d9235f1f
總結(jié)
以上是生活随笔為你收集整理的webpack结合reactjs、vuejs项目中图片处理的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: Swift标准库源码阅读笔记 - Arr
- 下一篇: 用Vue来实现图片上传多种方式