運(yùn)用webpack批量壓縮圖片的小工具深胳,支持png,jpg,gif,對(duì)大圖片壓縮效果較好
項(xiàng)目地址:https://github.com/robinLiu1989/webpack-imgmini
一弹砚、下載依賴:
1、新建項(xiàng)目目錄 mkdir demo
2、cd demo && npm init -y
3、npm i webpack-imgmini --save
二祥楣、使用步驟:
1、mkdir img && mkdir output 在img目錄中放入,你想要壓縮的圖片或目錄误褪,也可以包含其他類型的文件
2责鳍、touch copyin 在里面寫入以下內(nèi)容
????const copydir=require('webpack-imgmini/copydir')
????copydir('./img/','./node_modules/webpack-imgmini/img/',,'copyIn')
3、touch copyout 在里面寫入以下內(nèi)容
????const copydir=require('webpack-imgmini/copydir')
????copydir('./node_modules/webpack-imgmini/dist/img/','./output/')
4兽间、在package.json的script中加入以下命令
????"copyIn":"node copyin.js",
????"copyOut":"node copyout.js",
"build":"webpack --config ./node_modules/webpack-imgmini/webpack.config.js --color --progress ",
"start":"npm run copyIn && npm run build && npm run copyOut"
三历葛、 運(yùn)行: npm run start