webpack雪碧圖實現（webpack管理小圖標素材）

雪碧圖也叫CSS精靈， 是一CSS圖像合成技術，這裏介紹webpack實現雪碧圖

//新手建議先看上一篇文章，結合實例容易理解；
//webpack+vue+vueRouter模塊化構建完整項目實例超詳細步驟（附截圖、代碼、入門篇）

這是個人文件目錄：

// 在上個實例項目上增長了icons文件夾；

// dist/sprites/目錄是後面執行webpack打包命令自動生成的，先不用管；

一、安裝webpack-spritesmith；

npm install --save-dev webpack-spritesmith

二、webpack.config.js添加以下代碼：

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

//module.exports = {//代碼}
  plugins: [
        new SpritesmithPlugin({
            // 目標小圖標
            src: {
                cwd: path.resolve(__dirname, './src/assets/imgs/icons'),
                glob: '*.png'
            },
            // 輸出雪碧圖文件及樣式文件
            target: {
                image: path.resolve(__dirname, './dist/sprites/sprite.png'),
                css: path.resolve(__dirname, './dist/sprites/sprite.css')
            },
            // 樣式文件中調用雪碧圖地址寫法
            apiOptions: {
                cssImageRef: '../sprites/sprite.png'
            },
            spritesmithOptions: {
                algorithm: 'top-down'
            }
        })
    ]

三、執行webpack打包指令,執行後打包生成dist/sprites/文件(或者上一篇文章寫的npm run build指令)

webpack

四、index.html文件中引入sprite.css，如：

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

五、App.vue中經過class引用小圖標，如：（具體圖標class進入sprite.css查看）

i標籤是行內元素，能夠添加css爲i.icon{display:inline-block}

六、執行命令webpack-dev-server，生產連接瀏覽器打開（或者上一篇文章寫的npm run dev）

webpack-dev-server

ok,效果以下：