var path = require('path')
 
var SpritesmithPlugin = require('webpack-spritesmith')
 
//自定义样式
var templateFunction = function (data) {
 var shared = '.ico { background-size: TWpx THpx }'
   .replace('TW', data.sprites[0].total_width / 2)
   .replace('TH', data.sprites[0].total_height / 2)
 
 var perSprite = data.sprites.map(function (sprite) {
   return '&.element-N {
 width: Wpx;
 height: Hpx;
 background-position: Xpx Ypx;
}'
     .replace('N', sprite.name)
     .replace('W', sprite.width / 2)
     .replace('H', sprite.height / 2)
     .replace('X', sprite.offset_x / 2)
     .replace('Y', sprite.offset_y / 2)
     .replace('TW', sprite.total_width / 2)
     .replace('TH', sprite.total_height / 2)
 }).join('
')
 
 return shared + '
' + perSprite
}
 
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/images/ios/'),
        glob: '*.png'
      },
      target: { //输出路径
        image: path.resolve(__dirname, 'src/spritesmith-generated/ios.png'),
        css: [
         [path.resolve(__dirname, 'src/spritesmith-generated/sprite-1.css'), {
           format: 'function_based_template'
         }],
         [path.resolve(__dirname, 'src/spritesmith-generated/sprite-2.css'), {
           format: 'handlebars_based_template'
         }]
        ]
      },
      customTemplates: {
       'function_based_template': templateFunction, //自定义输出什么样的css样式
      },
      apiOptions: {
        cssImageRef: 'ios.png'
      }
    })
  ]
}

src: { 
 //引入路径
 cwd: path.resolve(__dirname, 'src/images/ios/'),
 glob: '*.png' //这里进行更改
},

@(wechat|element|ios)/images/*.png

var path = require('path')
var SpritesmithPlugin = require('webpack-spritesmith')
 
var platforms = ['android', 'ant', 'element', 'ios', 'wechat']//, 'windows']
 
// var url = 'ant'
const TARGET = process.env.TARGET
 
console.log({ TARGET })
 
module.exports = [TARGET].map(l => {
 console.log(l)
 const url = l
 
 const fn = (data) => {
  console.log(url)
  var shared = 'background-size: TWpx THpx
'
    .replace('TW', data.sprites[0].total_width / 2)
    .replace('TH', data.sprites[0].total_height / 2)
 
  var perSprite = data.sprites.map(function (sprite) {
    return `&.${url}-N {
 width: Wpx;
 height: Hpx;
 background-position: Xpx Ypx;
}
`
      .replace('N', sprite.name)
      .replace('W', sprite.width / 2)
      .replace('H', sprite.height / 2)
      .replace('X', sprite.offset_x / 2)
      .replace('Y', sprite.offset_y / 2)
      .replace('TW', sprite.total_width / 2)
      .replace('TH', sprite.total_height / 2)
  }).join('
')
 
  return shared + '
' + perSprite
 }
 
 return {
  module: {
    rules: [
      {test: /.styl$/, use: [
        'style-loader',
        'css-loader',
        'stylus-loader'
      ]},
      {test: /.png$/, use: [
        'file-loader?name=i/[hash].[ext]'
      ]}
    ]
  },
  entry: {
   [url]: path.join(__dirname, url),
  },
  output: {
   path: path.join(__dirname, '../parsed/', url),
   filename: '[name].css'
  },
  resolve: {
    modules: ['node_modules', 'spritesmith-generated']
  },
  plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: path.resolve(__dirname, 'images/'+url+'/'),
        glob: '*.png' // '@(android|ant|element|ios|wechat|windows)/*.png'
      },
      target: {
        image: path.resolve(__dirname, '../parsed/'+url+'/'+url+'.png'),
        css: [
          [path.resolve(__dirname, '../parsed/'+url+'/'+url+'.css'), {
            format: 'function_based_template'
          }]
        ]
      },
      customTemplates: {
        'function_based_template': fn
      }
    })
  ]
 }
})