Add removeOriginalExtension option (#158)

Co-authored-by: Li Hu <li.hu@onedegree.hk>

Author: aszx87410

README.md

@@ -548,6 +548,13 @@ Default: `'[name]-[hash].[ext]'`
 The filename of the optimized images.
 Make sure you keep the `[hash]` part so they receive a new filename if the content changes.
 
+#### removeOriginalExtension
+
+Type: `boolean`<br>
+Default: `false`
+
+When images converted to WebP on the fly, `.webp` was append to the filename. For example, `test.png` became `test.png.webp`. If you want to have only one filename extension like `test.webp`, you can set this option to `true`.
+
 #### optimizeImagesInDev
 
 Type: `boolean`<br>
@@ -714,6 +721,7 @@ module.exports = withPlugins([
     imagesFolder: 'images',
     imagesName: '[name]-[hash].[ext]',
     handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
+    removeOriginalExtension: false,
     optimizeImages: true,
     optimizeImagesInDev: false,
     mozjpeg: {

lib/config.js

@@ -11,6 +11,7 @@ const getConfig = nextConfig => ({
   handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
   imagesFolder: 'images',
   imagesName: '[name]-[hash].[ext]',
+  removeOriginalExtension: false,
   inlineImageLimit: 8192,
   defaultImageLoader: 'img-loader',
   mozjpeg: {},

lib/loaders/webp-loader.js

@@ -60,7 +60,7 @@ const applyWebpLoader = (webpackConfig, nextConfig, optimize, isServer, detectLo
 const getWebpResourceQuery = (nextConfig, isServer) => {
   const urlLoaderOptions = getUrlLoaderOptions(nextConfig, isServer);
   const imageName = urlLoaderOptions.name.indexOf('[ext]') >= 0
-    ? urlLoaderOptions.name.replace('[ext]', '[ext].webp')
+    ? urlLoaderOptions.name.replace('[ext]', nextConfig.removeOriginalExtension ? 'webp' : '[ext].webp')
     : `${urlLoaderOptions.name}.webp`;
 
   return {