vuecli3 webpack-spritesmith 制作Sprites（雪碧图）

安装

npm i webpack-spritesmith

webpack.config引用

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

webpack.config 配置

plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: path.resolve(__dirname, 'src/assets/icon'), // 多个图片所在的目录
        glob: '*.png' // 匹配图片的路径
      },
      target: {
        // 生成最终图片的路径
        image: path.resolve(__dirname, 'src/assets/sprite.png'), 
        // 生成所需 SASS/LESS/Stylus mixins 代码，我们使用 Stylus 预处理器做例子
        css: path.resolve(__dirname, 'src/assets/sprite.css'), 
      },
      apiOptions: {
        cssImageRef: "~sprite.png"
      },
    }),
  ]

生成的CSS

.icon-bubble {
  background-image: url('../assets/sprite.png'); // 需要更改路径
  background-position: 0px 0px;
  width: 306px;
  height: 306px;
}
.icon-next_no {
  background-image: url('../assets/sprite.png');
  background-position: -306px 0px;
  width: 27px;
  height: 45px;
}

HTML调用

<div class="icon-bubble">/div>