教你在webpack中自动合成雪碧图

前言

在css中我们经常会引入图片作为背景，但是图片一多，就会造成过多的http请求，为了避免这种情况，我们就需要将多张图片合成一张图，也就是我们常说的雪碧图。我们接下来就说说如何在webpack中自动合成雪碧图，并自动替换css代码。

介绍

sprite-smith-loader是一款自动生成雪碧图工具，你可以在webpack中使用它，它会遍历css中以_sprite.png结尾的图片并自动生成雪碧图，然后修改相应的css代码。

支持CSS、SASS、LESS。

安装

下载sprite-smith-loader

npm install --save-dev sprite-smith-loader remove-file-webpack-plugin

配置

将loader添加到webpack的配置中，必须放在css-loader之后，别忘了添加file-loader或url-loader处理图片路径。

webpack.config.js

// 添加 remove-file-webpack-plugin 来清理 sprites文件夹
const RemoveFileWebpackPlugin = require('remove-file-webpack-plugin'); 

module.exports = {
  module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
                outputPath: 'images',
            },
        },
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader','sprite-smith-loader'],
        }
    ],
  },
  plugins: [
    new RemoveFileWebpackPlugin({
        dirNames:["sprites"]
    })
  ],
};

配合SASS

const RemoveFileWebpackPlugin = require('remove-file-webpack-plugin'); 

module.exports = {
  module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
                outputPath: 'images',
            },
        },
        {
            test: /\.(sass|scss|css)/,
            use: ['style-loader', 'css-loader','sprite-smith-loader',"sass-loader"],
        }
    ],
  },
  plugins: [
    new RemoveFileWebpackPlugin({
        dirNames:["sprites"]
    })
  ],
};

使用

修改图片名以 _sprite.png 结尾，并在css中引入它

.my_bg_1{
    height: 100px;
    width: 100px;
    background: url('./demo1_sprite.png') 0px 0px;
    background-size: 100px 100px;
}

.my_bg_2{
    height: 100px;
    width: 100px;
    background: url('./demo2_sprite.png') -20px -20px;
    background-size: 150px 150px;
}

只要你遵循以下规范，loader会在css中引入生成的雪碧图作为新的背景图，并替换background-size、background-position等属性。

属性名	是否必填	说明
height	true	单位为 px
width	true	单位为 px
background-size	true	单位为 px
background	true	包含 image，position，repeat
background-image	true	包含于 background，图片名以 _sprite.png结尾
background-position	false	包含于 background，值为 px px 的形式
background-repeat	false	不要填no-repeat以外的值

License

MIT