设置精灵图输出路径

README.md

@@ -68,19 +68,36 @@ It's very easy to adapt Retina screen. You just need to use double size images a
 sprite-loader will collect all the background and background-image attributes in css files to combine. Except for following circumstance:
 
 1. Images that set the background-position and background-size.
-	
+
 	```
 	/* ignore images that set background-position */
 	.bg1{background: url(1.png) no-repeat -10px -10px;}
 	/* ignore images that set background-size的 */
 	.bg2{background: url(2.png); background-size: 10px 10px;}
 	```
 2. Image url that contain #spriteignore string.
-	
+
 	```
 	/* ignore all images that contain #spriteignore */
 	.bg3{background: url(3.png#spriteignore);}
 	```
-
+### 4.Set the output path of the sprite
+You can set the output path of the sprite through configure the `outputPath` option, which can be an absolute path with `output.path` as the root or a relative path relative to the `output.path`.
+
+The path setted will be transformed to an absolute path with `output.path` as the root, and the `output.publicPath` will be prepended when set the background image url in CSS.
+
+```javascript
+const spriteLoader = {
+  loader: 'sprite-loader',
+  options: {
+    outputPath: '/static/imgs/sprites/'
+  }
+}
+```
+
+Why transform the path to an absolute path with `output.path` as the root?
+
+Because sprite is one kind of image resource, it should be inside the image directory when deployed.
+
 ## Licence
 MIT

README_ZH.md

@@ -65,19 +65,37 @@ Retina屏适配非常简单，你只需将图片存为2倍大小，且命名为x
 sprite-loader会收集样式文件中所有的background,background-image属性的图片进行合并，但以下几种情况除外。
 
 1. 设置了background-position，background-size的图片。
-	
+
 	```
 	/* 忽略有background-position的图片 */
 	.bg1{background: url(1.png) no-repeat -10px -10px;}
 	/* 忽略有background-size的图片 */
 	.bg2{background: url(2.png); background-size: 10px 10px;}
 	```
 2. url带#spriteignore参数的图片。
-	
+
 	```
 	/* 忽略有#spriteignore的图片 */
 	.bg3{background: url(3.png#spriteignore);}
 	```
-
+
+### 4.设置精灵图的输出路径
+通过设置`outputPath`选项设置精灵图的输出路径。该选项可以是以`output.path`为根目录的绝对路径或者相对于`output.path`的相对路径。
+
+设置的路径在内部会被转化为以`output.path`为根目录的绝对路径，同时在CSS中设置背景图的路径时，`output.publicPath`会被添加在路径的前面。
+
+```javascript
+const spriteLoader = {
+  loader: 'sprite-loader',
+  options: {
+    outputPath: '/static/imgs/sprites/'
+  }
+}
+```
+
+为什么`outputPath`最终被解析为以`output.path`为根目录的绝对路径？
+
+因为精灵图作为一种图片资源，部署时应该和其他图片位于同一个目录。
+
 ## 协议
-MIT
+MIT

lib/loader.js

@@ -107,16 +107,19 @@ function createSpriteImage(images, repeatType, query) {
 }
 
 function emitSprite(name, buffer) {
-    let options = (loaderUtils.getOptions ? loaderUtils.getOptions(this) : loaderUtils.parseQuery(this.query)) || {};
-    let outputPath = options.outputPath || '';
-    let cssImagePath = options.cssImagePath || this._compiler.options.output.publicPath;
-    let nameTpl = name || '[hash].png';
+  const options = (loaderUtils.getOptions ? loaderUtils.getOptions(this) : loaderUtils.parseQuery(this.query)) || {};
+  const outputPath = options.outputPath || '';
+  const projectkOutputOptions = this._compiler.options.output;
+  const projectPublicPath = projectkOutputOptions.publicPath;
+  const nameTpl = name || '[hash].png';
+  const url = loaderUtils.interpolateName(this, nameTpl, {content: buffer});
+  const normalizedOutputPath = outputPath.replace(/^\.?\/?/, '');
+  const theSpriteFilePath = `${normalizedOutputPath}/${url}`.replace(/\/\//g, '/');
+  const theImageUrlInCSS = (projectPublicPath + normalizedOutputPath + url).replace(/\/\//g, '/');
 
-    let url = loaderUtils.interpolateName(this, nameTpl, {content: buffer});
-    this.emitFile(outputPath+url, buffer);
+  this.emitFile(theSpriteFilePath, buffer);
 
-    //return this._compiler.options.output.publicPath + url;
-    return cssImagePath+url;
+  return theImageUrlInCSS;
 }
 
 function toPx(num) {
@@ -261,4 +264,4 @@ module.exports.loader = function (content) {
     })
         .then(cssText => callback(null, cssText))
         .catch(e => callback(e));
-};
+};