Add option for default sizes & setting output context

README.md

@@ -40,12 +40,33 @@ Or use it in CSS (only the first resized image will be used, if you use multiple
 
 ### Options
 
-- `sizes: array`: specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)
+- `sizes: array`: specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). You may also declare a default `sizes` array in `responsiveLoader` in your `webpack.config.js`.
 - `size: integer`: specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)
 - `quality: integer`: JPEG compression quality; defaults to `95`
 - `ext: string`: either `png`, `jpg`, or `gif`; use to convert to another format; defaults to original file's extension
 - `background: hex`: Background fill when converting transparent to opaque images; defaults to `0xFFFFFFFF` (note: make sure this is a valid hex number)
 
+
+### Examples
+
+Set a default `sizes` array, so you don't have to declare them with each `require`.
+
+```js
+module.exports = {
+  entry: {...},
+  output: {...},
+  module: {
+    loaders: [{
+      test: /\.(jpe?g|png)$/i,
+      loader: 'responsive'
+    ]}
+  },
+  responsiveLoader: {
+    sizes: [300, 600, 1200, 2000]
+  }
+}
+```
+
 ## Notes
 
 - Doesn't support `1x`, `2x` sizes.

index.js

@@ -14,12 +14,13 @@ module.exports = function loader(content) {
   const loaderCallback = this.async();
   const query = loaderUtils.parseQuery(this.query);
   const options = this.options.responsiveLoader || {};
-  const sizes = query.sizes || query.size || [Number.MAX_SAFE_INTEGER];
-  const name = query.name || '[hash]-[width].';
+  const sizes = query.sizes || query.size || options.sizes || [Number.MAX_SAFE_INTEGER];
+  const name = query.name || options.name || '[hash]-[width].';
+  const outputContext = query.context || options.context || '';
   // JPEG compression
-  const quality = parseInt(query.quality, 10) || 95;
+  const quality = parseInt(query.quality, 10) || options.quality || 95;
   // Useful when converting from PNG to JPG
-  const background = parseInt(query.background, 16) || 0xFFFFFFFF;
+  const background = parseInt(query.background, 16) || options.background || 0xFFFFFFFF;
   // Specify ext to convert to another format
   const ext = query.ext || path.extname(this.resourcePath).replace(/\./, '');
   const mime = MIMES[ext];
@@ -35,7 +36,7 @@ module.exports = function loader(content) {
 
   if (options.pass) {
     // emit original content only
-    const f = loaderUtils.interpolateName(loaderContext, '[hash].[ext]', {content: content});
+    const f = loaderUtils.interpolateName(loaderContext, '[hash].[ext]', {context: outputContext, content: content});
     loaderContext.emitFile(f, content);
     const p = '__webpack_public_path__ + ' + JSON.stringify(f);
     return loaderCallback(null, 'module.exports = {srcSet:' + p + ',images:[{path:' + p + ',width:1}],src: ' + p + ',toString:function(){return ' + p + '}};');
@@ -57,7 +58,10 @@ module.exports = function loader(content) {
               return queueCallback(queueErr);
             }
 
-            const fileName = loaderUtils.interpolateName(loaderContext, name + ext, {content: buf}).replace(/\[width\]/ig, width);
+            const fileName = loaderUtils.interpolateName(loaderContext, name + ext, {
+              context: outputContext,
+              content: buf
+            }).replace(/\[width\]/ig, width);
 
             loaderContext.emitFile(fileName, buf);
 

test/index.js

@@ -15,3 +15,19 @@ test('single size', t => {
   t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', single.toString());
   t.end();
 });
+
+test('with size defined in webpack.config.js', t => {
+  const multi = require('../index!./cat-1000.jpg');
+  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg 500w,foobar/16c2a62d860f67276d750a7777ec932e-750.jpg 750w,foobar/6582e69db43187e14b01fa76c021cf71-1000.jpg 1000w', multi.srcSet);
+  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.src);
+  t.equal('foobar/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.toString());
+  t.end();
+});
+
+test('output should be relative to context', t => {
+  const multi = require('../index?name=[path][hash]-[width].&context=./!./cat-1000.jpg');
+  t.equal('foobar/test/ac8fbe83765514062b5da3b8966cd475-500.jpg 500w,foobar/test/16c2a62d860f67276d750a7777ec932e-750.jpg 750w,foobar/test/6582e69db43187e14b01fa76c021cf71-1000.jpg 1000w', multi.srcSet);
+  t.equal('foobar/test/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.src);
+  t.equal('foobar/test/ac8fbe83765514062b5da3b8966cd475-500.jpg', multi.toString());
+  t.end();
+});

test/webpack.config.js

@@ -2,6 +2,9 @@ const path = require('path');
 
 module.exports = {
   entry: path.resolve(__dirname, 'index'),
+  responsiveLoader: {
+    sizes: [500, 750, 1000]
+  },
   output: {
     path: path.resolve(__dirname, 'build'),
     publicPath: 'foobar/',