webpack学习（七）打包压缩图片
生活随笔
收集整理的這篇文章主要介紹了
webpack学习（七）打包压缩图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用插件webpack-spritesmith生成雪碧圖
1、安裝webpack-spritesmith；
npm install --save-dev webpack-spritesmith
2.配置webpack.config.js
new SpritesmithPlugin({ //生成的雪碧圖本身就壓縮了圖片大小 src: {cwd: path.resolve(__dirname, 'src/image/icon'), //準備合并成sprit的圖片存放文件夾glob: '*.png' //哪類圖片 },target: {image: path.resolve(__dirname, 'dist/sprites/sprites.png'), // sprite圖片保存路徑css: path.resolve(__dirname, 'dist/sprites/_sprites.css') // 生成的css保存在哪里 },apiOptions: {cssImageRef: "../sprites/sprites.png" //css根據該指引找到sprite圖 }}),貼一張目錄
3、執行webpack打包指令,執行后打包生成dist/sprites/文件
4、index.html文件中引入sprite.css，如：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>webpack</title><link href="bundle.3a78e3af7afe10200470.css" rel="stylesheet"></head><link href="sprites/_sprites.css" rel="stylesheet"> //引用就可以了 </head> <body><!--測試webpack--><div class="test">測試webpack</div><div class="test1">測試webpack1</div><div class="icon-a">a</div> //需要的地方來用就可以了<div class="icon-b">b</div> <script type="text/javascript" src="bundle-3a78e3af7afe10200470.js"></script> </body> </html>?合成后的sprites.png
合成后的sprites.css
.icon-a { //名稱為icon+圖片名background-image: url(../sprites/sprites.png);background-position: 0px 0px;width: 50px;height: 50px; } .icon-b {background-image: url(../sprites/sprites.png);background-position: -50px 0px;width: 50px;height: 50px; } .icon-c {background-image: url(../sprites/sprites.png);background-position: 0px -50px;width: 50px;height: 50px; }?5.適用的場景
?
轉載于:https://www.cnblogs.com/chaixiaozhi/p/8620766.html
總結
以上是生活随笔為你收集整理的webpack学习（七）打包压缩图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ReactNative的基本组件的认识
- 下一篇： 洛谷 2777 [AHOI2016初中组