webpack雪碧圖的實現

步驟一 安裝webpack-spritesmith

npm install --save-dev webpack-spritesmith
複製代碼

步驟二 在webpack.config.js添加代碼

var path = require('path');
var SpritesmithPlugin = require('webpack-spritesmith');
module.exports = {
    // ...
    module: {
        rules: [
            {test: /\.styl$/, use: [
                'style-loader',
                'css-loader',
                'stylus-loader'
            ]},
            {test: /\.png$/, use: [
                'file-loader?name=i/[hash].[ext]'
            ]}
        ]
    },
    resolve: {
        modules: ["node_modules", "spritesmith-generated"]
    },
    plugins: [
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/ico'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
                css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.styl')
            },
            apiOptions: {
                cssImageRef: "~sprite.png"
            }
        })
    ]
};
複製代碼

步驟三 執行webpack打包命令，則將在對應的文件夾生成css和png

使用方式：

塊狀元素：

<div class="icon-home"></div>
複製代碼

行內塊狀元素：

.icon {
  display: inline-block;
}
複製代碼

<i class="icon icon-home"></i>
複製代碼