Skip to content

Commit efc3f2f

Browse files
dzuloagadzuloaga
committed
Replace depretiated subtr with slice
1 parent 5ed6350 commit efc3f2f

File tree

5 files changed

+953
-1364
lines changed

5 files changed

+953
-1364
lines changed

‎README.md

Lines changed: 54 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -161,35 +161,34 @@ ReactDOM.render(
161161
)
162162
```
163163

164-
You can also use the following notation:
164+
You can also use JSON5 notation:
165165

166166
```
167-
<source srcSet={require("./image.jpg?{sizes:[50,100,200,300,400,500,600,700,800], format: 'webp'}").srcSet} type="image/webp"/>
167+
<source srcSet={require('./image.jpg?{sizes:[50,100,200,300,400,500,600,700,800], format: "webp"}').srcSet} type='image/webp'/>
168168
```
169169

170-
More here https://github.com/webpack/loader-utils#parsequery
171-
172170
### Options
173171

174-
| Option | Type | Default | Description |
175-
| --------------------------- | -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
176-
| `name` | `string` | `[hash]-[width].[ext]` | Filename template for output files. |
177-
| `outputPath` | `string \| Function` | `undefined` | Configure a custom output path for your file |
178-
| `publicPath` | `string \| Function` | `undefined` | Configure a custom public path for your file. |
179-
| `context` | `string` | `this.options.context` | Custom file context, defaults to webpack.config.js [context](https://webpack.js.org/configuration/entry-context/#context) |
180-
| `sizes` | `array` | _original size_ | 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 the loader options in your `webpack.config.js`. |
181-
| `size` | `integer` | _original size_ | 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) |
182-
| `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
183-
| `max` | `integer` | | See `min` above |
184-
| `steps` | `integer` | `4` | Configure the number of images generated between `min` and `max` (inclusive) |
185-
| `quality` | `integer` | `85` | JPEG and WEBP compression quality |
186-
| `format` | `string` | _original format_ | Either `png` or `jpg`; use to convert to another format. `webp` and `avif` is also supported, but only by the sharp adapter |
187-
| `placeholder` | `boolean` | `false` | A true or false value to specify wether to output a placeholder image as a data URI |
188-
| `placeholderSize` | `integer` | `40` | A number value specifying the width of the placeholder image, if enabled with the option above |
189-
| `adapter` | `Adapter` | JIMP | Specify which adapter to use. Can only be specified in the loader options. |
190-
| `disable` | `boolean` | `false` | Disable processing of images by this loader (useful in development). `srcSet` and other attributes will still be generated but only for the original size. Note that the `width` and `height` attributes will both be set to `100` but the image will retain its original dimensions. |
191-
| **[`esModule`](#esmodule)** | `boolean` | `false` | Use ES modules syntax. |
192-
| `emitFile` | `boolean` | `true` | If `true`, emits a file (writes a file to the filesystem). If `false`, the loader will still return a object with the public URI but will not emit the file. It is often useful to disable this option for server-side packages. |
172+
| Option | Type | Default | Description |
173+
| --------------------------------------- | --------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
174+
| `name` | `string` | `[hash]-[width].[ext]` | Filename template for output files. |
175+
| `outputPath` | `string \| Function` | `undefined` | Configure a custom output path for your file |
176+
| `publicPath` | `string \| Function` | `undefined` | Configure a custom public path for your file. |
177+
| `context` | `string` | `this.options.context` | Custom file context, defaults to webpack.config.js [context](https://webpack.js.org/configuration/entry-context/#context) |
178+
| `sizes` | `array` | _original size_ | 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 the loader options in your `webpack.config.js`. |
179+
| `size` | `integer` | _original size_ | 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) |
180+
| `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
181+
| `max` | `integer` | | See `min` above |
182+
| `steps` | `integer` | `4` | Configure the number of images generated between `min` and `max` (inclusive) |
183+
| `quality` | `integer` | `85` | JPEG and WEBP compression quality |
184+
| `format` | `string` | _original format_ | Either `png` or `jpg`; use to convert to another format. `webp` and `avif` is also supported, but only by the sharp adapter |
185+
| `placeholder` | `boolean` | `false` | A true or false value to specify wether to output a placeholder image as a data URI |
186+
| `placeholderSize` | `integer` | `40` | A number value specifying the width of the placeholder image, if enabled with the option above |
187+
| `adapter` | `Adapter` | JIMP | Specify which adapter to use. Can only be specified in the loader options. |
188+
| `disable` | `boolean` | `false` | Disable processing of images by this loader (useful in development). `srcSet` and other attributes will still be generated but only for the original size. Note that the `width` and `height` attributes will both be set to `100` but the image will retain its original dimensions. |
189+
| **[`esModule`](#esmodule)** | `boolean` | `false` | Use ES modules syntax. |
190+
| `emitFile` | `boolean` | `true` | If `true`, emits a file (writes a file to the filesystem). If `false`, the loader will still return a object with the public URI but will not emit the file. It is often useful to disable this option for server-side packages. |
191+
| **[`cacheDirectory`](#cachedirectory)** | `string` or `boolean` | `false` | Experimental: If `true`, this will cache the result object but not the image files. The images are only produced once, when they are not found in the results object cache, or when the options change (cache key). For Development you can set query parameter to `?cacheDirectory=false`. |
193192

194193
#### Adapter-specific options
195194

@@ -200,10 +199,8 @@ More here https://github.com/webpack/loader-utils#parsequery
200199
##### sharp
201200

202201
- `background: string` — Background fill when converting transparent to opaque images. E.g. `#FFFFFF` or `%23FFFFFF` for webpack > 5
203-
204202
- `format: webp` — Conversion to the `image/webp` format. Recognizes the `quality` option.
205203
- `format: avif` — Conversion to the `image/avif` format. Recognizes the `quality` option.
206-
207204
- `progressive: boolean` - Use progressive (interlace) scan for `image/jpeg` format.
208205
- `rotate: number` - Rotates image [more here](https://sharp.pixelplumbing.com/api-operation#rotate)
209206

@@ -236,6 +233,38 @@ module.exports = {
236233
}
237234
```
238235

236+
### `cacheDirectory`
237+
238+
Type: `Boolean` or `string`
239+
Default: `false`
240+
241+
Experimental: If `true`, this will cache the result object but not the image files. The images are only produced once, when they are not found in the results object cache, or when the options change (cache key). For Development you can set query parameter to individual images by using `?cacheDirectory=false`.
242+
243+
Default cache directory might be ```.node_modules/.cache/responsive-loader```
244+
245+
```js
246+
module.exports = {
247+
module: {
248+
rules: [
249+
{
250+
test: /\.(jpe?g|png)$/i,
251+
use: [
252+
{
253+
loader: 'responsive-loader',
254+
options: {
255+
esModule: true,
256+
cacheDirectory: true,
257+
publicPath: "/_next",
258+
name: "static/media/[name]-[hash:7]-[width].[ext]",
259+
},
260+
},
261+
],
262+
},
263+
],
264+
},
265+
}
266+
```
267+
239268
### `esModule`
240269

241270
Type: `Boolean`

0 commit comments

Comments
 (0)