sprite-property-plugin-webpack v1.0.7

雪碧图处理工具。

原 PostCSS 工具：https://github.com/HaoyCn/postcss-sprite-property

核心用法请参照上述工具。

在 Webpack 环境中，相关变化如下：

• 如果在 file-loader 等相关 loader 中改变了打包的静态资源名，应当使用 path.input 选项指定如何获取原本的切片元素地址

• 选项：postcss
  • 默认：[]
  • 有些 PostCSS 工具可能得在雪碧图数据处理后运行，将它们放到这里

• 选项：wrapNodeSass
  • 默认：fasle
  • sass-loader 处理函数参数有问题，故需要自行包裹 node-sass 相关方法来注入自定义函数
  • 如果无需在 SASS 里使用自定义函数，可不开启此项

• 选项：removeAssets
  • 类型：Function | RegExp | String
  • 默认：undefined
  • 当合并雪碧图的时候，切片资源已经被 Webpack 加载了。通过此选项判定哪些资源应当被删除

示例：

注意，此示例是在 Vue.js + Webpack 开发中用到的，故：

1. Vue.js 内的组件样式需要经 extract-text-webpack-plugin 导出，因此雪碧图插件应当排在该插件之后
2. 如果只是单纯使用 sass-loader 加载 CSS，建议自行包裹 node-sass 并按原工具所示使用

const SpritePlugin = require('sprite-property-plugin-webpack')
const autoprefixer = require('autoprefixer')

new SpritePlugin({
	path: {
		include: ['src/asset/sprite', 'src/css'],
		output: 'dist/images/sprite_[name].[contenthash:6].png',
		public: '../images/sprite_[name].[contenthash:6].png'
	},
	retina: true,
	development: process.env.NODE_ENV === 'development',
	wrapNodeSass: true,
	filter: /asset\/sprite/,
	removeAssets: /asset\/sprite/,
	spritesmith: {
		padding: 8
	},
	pngquant: {
		floyd: 0.8
	},
	postcss: [
		autoprefixer
	],
	excludeCSS: () => process.env.VUE_ENV === 'server'
})