webpack css图像合图实现

雪碧图也叫CSS精灵， 是一CSS图像合成技术，这里介绍webpack实现雪碧图

项目目录.jpg

1. 安装webpack-sprites

npm install --save-dev webpack-sprites
cnpm i -D webpack-sprites
yarn add -D webpack-sprites

2. webpack.dev.conf.js

const SpritesmithPlugin = require('webpack-spritesmith');

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

配置.jpg

3. 执行打包指令或者实时构建指令

npm run dev / webpack

4. 在index.html文件中引入sprite.css文件

<link rel="stylesheet" type="text/css" href="../static/css/sprite.css" />

5. 在项目中引入图标
   这个依赖的实现原理是：将需要合图的图片文件夹指定好，将所有需要合图安装图片文件名生成对应的css样式。需要去生成的sprite.css文件中查找需要引入的对应图片文件。

class使用.jpg

webpack-sprites的使用问题

1. 如何配置rem单位

由于正个站点是但页面应用，统一使用的 rem, 而生成的sprit.css是为 px为单位，面临如何配置rem单位的问题。

2. sprite.css有其它的引入方法吗

目前尝试了官网的引入方式，和index.html的引入方式，都不太理想。