Support [width] and [height] placeholders in file names

README.md

@@ -50,7 +50,7 @@ module.exports = {
 | limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |
 | optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |
 | cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |
-| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. |
+| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. Additionally to the [default placeholders](https://github.com/webpack-contrib/file-loader#placeholders), `[width]` and `[height]` are also available. |
 | outputPath | | `string` | Images will be saved in this directory instead of the default webpack outputPath. |
 | publicPath | | `string` | The public path that should be used for image URLs instead of the default webpack publicPath. |
 | mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |

src/processLoaders.ts

@@ -40,6 +40,24 @@ const enrichResult = (
  )},toString:function(){return src;}};`;
 };
 
+/**
+ * Replace additional placeholders in the file name
+ *
+ * @param {string} name File name pattern
+ * @param {{ width?: number; height?: number; format?: string }} originalImageInfo Metadata of original image
+ * @param {ImageOptions} imageOptions Image options
+ * @returns {string} Replaced file name
+ */
+const replaceName = (
+ name: string,
+ originalImageInfo: { width?: number; height?: number; format?: string },
+ imageOptions: ImageOptions,
+): string => {
+ return name
+ .replace(/\[width\]/g, `${imageOptions.width || originalImageInfo.width}`)
+ .replace(/\[height\]/g, `${imageOptions.height}`);
+};
+
 /**
  * Process further loaders (url-loader & file-loader)
  *
@@ -75,6 +93,9 @@ const processLoaders = (
  esModule: false,
  } as OptionObject;
 
+ // replace name
+ furtherLoaderOptions.name = replaceName(furtherLoaderOptions.name, originalImageInfo, imageOptions);
+
  // change extension for converted images
  if (imageOptions.convert && furtherLoaderOptions.name) {
  furtherLoaderOptions.name =