前言在css中，我们经常会引入图片作为背景，但是如果图片过多，会造成http请求过多。为了避免这种情况，我们需要将多张图片组合成一张图片，也就是我们常说的Sprite图片。接下来说说如何在webpack中自动合成sprite图片并自动替换css代码。简介sprite-smith-loader是一款自动生成精灵图片的工具。你可以在webpack中使用它。它会遍历css中以_sprite.png结尾的图片自动生成sprite图片，然后修改相应的css代码。支持CSS、SASS、LESS。图片应为png格式（不要直接将图片后缀改为png）。github地址点此安装下载sprite-smith-loadernpminstall--save-devsprite-smith-loaderremove-file-webpack-pluginconfiguration添加loader到webpack配置中，一定要放在css-loader后面，不要忘记添加文件加载器或url加载器来处理图像路径。webpack.config.js//添加remove-file-webpack-plugin来清理sprites文件夹constRemoveFileWebpackPlugin=require('remove-file-webpack-plugin');module.exports={module:{rules:[{test:/\.(png|jpe?g|gif)$/i,loader:'file-loader',options:{outputPath:'images',},},{测试:/\.css$/i,使用:['style-loader','css-loader','sprite-smith-loader'],}],},插件:[newRemoveFileWebpackPlugin({dirNames:["sprites"]})],};配制SASSconstRemoveFileWebpackPlugin=require('remove-file-webpack-plugin');module.exports={module:{rules:[{test:/\.(png|jpe?g|gif)$/i,loader:'file-loader',options:{outputPath:'images',},},{测试:/\.(sass|scss|css)/,使用:['style-loader','css-loader','sprite-smith-loader',"sass-loader"],}],},plugins:[newRemoveFileWebpackPlugin({dirNames:["sprites"]})],};使用修改后的图片名称以_sprite.png结尾，导入css.my_bg_1{height:100px；宽度：100px；背景：url('./demo1_sprite.png')0px0px；背景大小：100px100px；}.my_bg_2{高度：100px；宽度：100px；背景：url('./demo2_sprite.png')-20px-20px;background-size:150px150px;}只要按照以下规范，loader就会将生成的Sprite图片引入css作为新的背景图片，并替换background-size,background-position等属性名称是否必填描述heighttrue单位为pxwidthtrue单位为pxbackground-sizetrue单位为pxbackgroundtrue包含图片，position，repeatbackground-imagetrue包含在背景中，图片名称以_sprite.png结尾background-positionfalse包含在背景中，且取值形式为pxpxbackground-repeatfalse不填除no-repeat以外的值LicenseMIT
