sprite

handleSize.js

let psdSize = 750; //设计稿宽度
let RemRatio = 16; //REM 换算比值
let baseFontSize = psdSize / RemRatio; // 基准字体大小，单位px

var templateFunction = function (data) {
    var common = '.icon {display: inline-block;}';
    var perSprite = data.sprites.map(function (sprite) {
        return '.imgN {background-image: url(I); width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
            .replace(/px/g, 'rem')
            .replace('I', sprite.image)
            .replace('N', sprite.name)
            .replace('W', sprite.width / baseFontSize)
            .replace('H', sprite.height / baseFontSize)
            .replace('X', -sprite.offset_x / baseFontSize)
            .replace('Y', -sprite.offset_y / baseFontSize);
    }).join('\n');

    return '@charset "utf-8";\n' + perSprite;
};

module.exports = templateFunction;

webpack.config.js

const postcssSprites = require('postcss-sprites');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const path = require('path');
const handleSize = require('./handleSize')

module.exports = {
    devtool: "inline-source-map",
    entry: "./src/js/index.js",
    output: {
        path: __dirname + "/dist/js",
        filename: "bundle.js"
    },
    devServer: {
        compress: false,
        contentBase: __dirname,
        publicPath: '/',
        port: 8081
    },
    module: {
        loaders: [{
            test: /\.js|.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }],
        rules: [{
                test: /\.css$/,
                exclude: /dist/,
                // use : ExtractTextPlugin.extract({
                //     fallback : 'style-loader',
                //     use : ['css-loader?module&localIdentName=[local]','postcss-loader']
                // })
                use: ['style-loader', 'css-loader?module&localIdentName=[local]', 'postcss-loader']
            },
            {
                test: /\.(jpg|png)$/,
                use: 'file-loader?name=../img/[name].[ext]'
            }
        ]
    },
    plugins: [
        // new ExtractTextPlugin("../css/global.css"),
        new HtmlWebpackPlugin({
            title: "postcss生成雪碧图",
            filename: "index.html",
            template: 'src/index.html'
        }),
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/img'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'dist/spritesmith-generated/sprite.png'),
                css: [[path.resolve(__dirname, 'dist/spritesmith-generated/sprite.css'), {
                    format: 'function_based_template'
                }]]
            },
            apiOptions: {
                cssImageRef: './sprite.png'
            },
            customTemplates: {
                'function_based_template': handleSize,
            }
        })
    ]
}