webpack雪碧图

安装 webpack-spritesmith

在webpack.config.js中配置

    plugins: [
        new SpritesmithPlugin({
            // 目标小图标
            src: {
                cwd: path.resolve(__dirname, 'app/images/'),
                glob: '*.png'
            },
            // 输出雪碧图文件及样式文件
            target: {
                image: path.resolve(__dirname, 'build/images/sprite.png'),
                //css: path.resolve(__dirname, 'build/css/_sprite.scss')
                css: path.resolve(__dirname, 'build/css/sprite.css')
            },
            // 样式文件中调用雪碧图地址写法
            apiOptions: {
                cssImageRef: '../images/sprite.png'
            },
            spritesmithOptions: {
                algorithm: 'top-down'
            }
        })
    ],

同时配置modules

module: {
        loaders: [
            //解析.scss文件,对于用 import 或 require 引入的sass文件进行加载
            { test: /\.scss$/, loader: "style!css!sass" },
            //在小于8K的图片将直接以base64的形式内联在代码中，可以减少一次http请求。
            { test:/\.(png|jpg)$/, loader: "url-loader?limit=8192"}
        ]
    }

最后生成
１．内含 sprite.css的css文件夹
２．内含sprite.png的的image文件夹

源文件图片名

• icon_qq.png
• icon_douban.png
• icon_renren.png
• icon_weibo.png

其中sprite.css的文件样式

Example usage in HTML:

`display: block` sprite:


To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML

*/
.icon-icon_douban {
  background-image: url(../images/sprite.png);
  background-position: 0px 0px;
  width: 54px;
  height: 54px;
}
.icon-icon_qq {
  background-image: url(../images/sprite.png);
  background-position: 0px -54px;
  width: 54px;
  height: 54px;
}
.icon-icon_renren {
  background-image: url(../images/sprite.png);
  background-position: 0px -108px;
  width: 54px;
  height: 54px;
}
.icon-icon_weibo {
  background-image: url(../images/sprite.png);
  background-position: 0px -162px;
  width: 54px;
  height: 54px;
}