如何在Webpack中使用雪碧圖插件-創(chuàng)新互聯(lián)

這篇文章給大家介紹如何在Webpack中使用雪碧圖插件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)長(zhǎng)期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為陽(yáng)春企業(yè)提供專(zhuān)業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)，陽(yáng)春網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

1. 安裝配置

首先在項(xiàng)目中按照官方說(shuō)明 install 之后，在 bulid/webpack.base.conf.js 中進(jìn)行如下配置。需要說(shuō)明的是，雪碧圖是開(kāi)發(fā)模式和生產(chǎn)模式都要使用的功能，因此我們?cè)?webpack 的基礎(chǔ)配置中進(jìn)行設(shè)置。

1.1 首先引入插件 const SpritesmithPlugin = require('webpack-spritesmith');；

1.2 其次在 module.rules 將 png 圖標(biāo)的默認(rèn)配置注釋掉，避免 url-loader 將其編譯成行內(nèi)圖片，同時(shí)單獨(dú)設(shè)置 png 圖標(biāo)的配置，如下：

{
 // test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // 注釋掉原有配置，去掉對(duì)png圖標(biāo)的匹配
 test: /\.(jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
},
// 對(duì)圖標(biāo)單獨(dú)設(shè)置，以便生成雪碧圖
{
 test: /\.png$/,
 loaders: [
  'file-loader' // 使用 file-loader 對(duì) png 圖標(biāo)進(jìn)行設(shè)置
 ]
},

1.3 接著在 webpack 的配置對(duì)象中找到 plugins 屬性（沒(méi)有請(qǐng)自行創(chuàng)建），添加雪碧圖的處理?；九渲萌缦拢?/p>

plugins: [
 // 雪碧圖設(shè)置
 new SpritesmithPlugin({
  src: {
   cwd: path.resolve(__dirname, '../src/assets/images/icons/'), // 圖標(biāo)根路徑
   glob: '**/*.png' // 匹配任意 png 圖標(biāo)
  },
  target: {
   image: path.resolve(__dirname, '../src/assets/css/sprites-generated.png'), // 生成雪碧圖目標(biāo)路徑與名稱(chēng)
   // 設(shè)置生成CSS背景及其定位的文件或方式
   css: [
    [path.resolve(__dirname, '../src/assets/css/sprites-generated.css'), {
     format: 'function_based_template'
    }]
   ]
   // css: path.resolve(__dirname, '../src/assets/spritesmith-generated/sprite.less')
  },
  customTemplates: {
   'function_based_template': templateFunction,
  },
  apiOptions: {
   cssImageRef: "./sprites-generated.png", // css文件中引用雪碧圖的相對(duì)位置路徑配置
  },
 })
],

這里我使用的是CSS定制方式，即在 target.css 中，配置對(duì)應(yīng)的format函數(shù)名 function_based_template（注意數(shù)組元素的層次關(guān)系，切勿配錯(cuò)）。然后在 customTemplates 中配置對(duì)應(yīng)名稱(chēng)的屬性名。

這里我引用了自定義函數(shù) templateFunction，該函數(shù)基本參考了官方示例。由于本人使用的是二倍圖，所以此處使用了圖片縮放和垂直居中的方式。大家選擇參考：

const templateFunction = function (data) {
 // console.log(data.sprites);
 const shared = '.w-icon { background-image: url(I); }'
   .replace('I', data.sprites[0].image);
 // 注意：此處默認(rèn)圖標(biāo)使用的是二倍圖
 const perSprite = data.sprites.map(function (sprite) {
  // background-size: SWpx SHpx;
  return '.w-icon-N { width: SWpx; height: SHpx; }\n.w-icon-N .w-icon, .w-icon-N.w-icon { width: Wpx; height: Hpx; background-position: Xpx Ypx; margin-top: -SHpx; margin-left: -SWpx; } '
   .replace(/N/g, sprite.name)
   .replace(/SW/g, sprite.width / 2)
   .replace(/SH/g, sprite.height / 2)
   .replace(/W/g, sprite.width)
   .replace(/H/g, sprite.height)
   .replace(/X/g, sprite.offset_x)
   .replace(/Y/g, sprite.offset_y);
 }).join('\n');

 return shared + '\n' + perSprite;
};

其實(shí)關(guān)鍵之處就是利用定制函數(shù)，將參數(shù)中每個(gè)圖標(biāo)的信息用來(lái)進(jìn)行樣式的定制。這些信息中包括圖標(biāo)名、寬高和在雪碧圖中的位置信息等。

當(dāng)然我們也可以將目標(biāo)生成成 less 文件，然后再進(jìn)行使用（示例代碼中注釋部分）。但本人發(fā)現(xiàn)會(huì)生成大量變量，而這些變量我們并不經(jīng)常使用，所以本人沒(méi)有采用這種方式。

2. 使用方法

進(jìn)行完上述配置之后，再在我們配置的源文件夾中添加我們需要處理的圖標(biāo)。然后啟動(dòng) vue-cli 的開(kāi)發(fā)者模式 npm run start（其他框架，運(yùn)行對(duì)應(yīng)命令）。

啟動(dòng)完成之后，我們可以發(fā)現(xiàn)在目標(biāo)目錄下生成了 sprites-generated.png 和 sprites-generated.css 兩個(gè)文件。在樣式文件中，形如：

.w-icon { background-image: url(./sprites-generated.png); }
.w-icon-apply { width: 25.5px; height: 27px; }
.w-icon-apply .w-icon, .w-icon-apply.w-icon { width: 51px; height: 54px; background-position: -208px -58px; margin-top: -27px; margin-left: -25.5px; }

接下來(lái)就是在使用組件中引用上述樣式即可。

3.遇到的問(wèn)題

3.1 放大頁(yè)面時(shí)，有些雪碧圖標(biāo)邊緣出現(xiàn)相鄰圖標(biāo)的邊緣，從而出現(xiàn)白線，怎么破？

做完雪碧圖之后，高高興興的拿給UI參看一下，沒(méi)過(guò)多久就被鄙視了：怎么頁(yè)面放大時(shí)，旁邊有一條白線？
納尼？怎么可能?。∽屑?xì)一看，放大之后有些圖標(biāo)周邊出現(xiàn)一些線條，而有些圖標(biāo)則沒(méi)有。而不放大時(shí)，則沒(méi)有這種情況。
難道是其他圖表也顯示進(jìn)來(lái)了？再回去看看生成的雪碧圖，果然是一個(gè)圖標(biāo)一個(gè)圖標(biāo)的緊緊的靠在一起，即圖標(biāo)之間沒(méi)有空隙。而且有些圖標(biāo)計(jì)算的結(jié)果有 .5px ，我們知道有些瀏覽器會(huì)解析成1px，從而出現(xiàn)上述問(wèn)題，瞬間恍然大悟。
于是仔細(xì)翻閱官方說(shuō)明，其中提到核心組件是 spritesmith and spritesheet-templates ，于是進(jìn)入 spritesmith 插件中查閱，發(fā)現(xiàn)果然有關(guān)于邊距問(wèn)題的描述和解決方法 spritesmith: padding。

可是在 webpack-spritesmith 又該怎么使用呢？

查閱 webpack-spritesmith 源代碼和文檔，發(fā)現(xiàn)：spritesmithOptions - optional. Options for spritesmith

好的，就是你啦！然后在 webpack 配置文件中，增加 padding 屬性，這里單位為 px：

 plugins: [
  // 雪碧圖設(shè)置
  new SpritesmithPlugin({
   // ... 省略其他配置
   // 核心組件配置
   spritesmithOptions: {
    padding: 4,
   }
  })
 ],

關(guān)于如何在Webpack中使用雪碧圖插件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：如何在Webpack中使用雪碧圖插件-創(chuàng)新互聯(lián)
文章路徑：http://bm7419.com/article10/dcopdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、微信公眾號(hào)、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容