refactor: filename option (#195)

BREAKING CHANGE: filename` is changed, you need to return path with placholders

Author: evilebottnawi

README.md

@@ -49,7 +49,7 @@ And run `webpack` via your preferred method.
 | **[`compressionOptions`](#compressionoptions)** |                `{Object}`                 | `{ level: 9 }` | Compression options for `algorithm`                                                                           |
 |          **[`threshold`](#threshold)**          |                `{Number}`                 |      `0`       | Only assets bigger than this size are processed (in bytes)                                                    |
 |           **[`minRatio`](#minratio)**           |                `{Number}`                 |     `0.8`      | Only assets that compress better than this ratio are processed (`minRatio = Compressed Size / Original Size`) |
-|           **[`filename`](#filename)**           |           `{String\|Function}`            |  `[path].gz`   | The target asset filename.                                                                                    |
+|           **[`filename`](#filename)**           |           `{String\|Function}`            |  `[base].gz`   | The target asset filename.                                                                                    |
 |              **[`cache`](#cache)**              |                `{Boolean}`                |     `true`     | Enable file caching                                                                                           |
 
 ### `test`
@@ -230,18 +230,27 @@ module.exports = {
 ### `filename`
 
 Type: `String|Function`
-Default: `[path].gz[query]`
+Default: `[path][base].gz`
 
 The target asset filename.
 
 #### `String`
 
-`[file]` is replaced with the original asset filename.
-`[path]` is replaced with the path of the original asset.
-`[dir]` is replaced with the directory of the original asset.
-`[name]` is replaced with the filename of the original asset.
-`[ext]` is replaced with the extension of the original asset.
-`[query]` is replaced with the query.
+For example we have `assets/images/image.png?foo=bar#hash`:
+
+`[path]` is replaced with the directories to the original asset, included trailing `/` (`assets/images/`).
+
+`[file]` is replaced with the path of original asset (`assets/images/image.png`).
+
+`[base]` is replaced with the base (`[name]` + `[ext]`) of the original asset (`image.png`).
+
+`[name]` is replaced with the name of the original asset (`image`).
+
+`[ext]` is replaced with the extension of the original asset, included `.` (`.png`).
+
+`[query]` is replaced with the query of the original asset, included `?` (`?foo=bar`).
+
+`[fragment]` is replaced with the fragment (in the concept of URL it is called `hash`) of the original asset (`#hash`).
 
 **webpack.config.js**
 
@@ -263,11 +272,14 @@ module.exports = {
 module.exports = {
   plugins: [
     new CompressionPlugin({
-      filename(info) {
-        // info.file is the original asset filename
-        // info.path is the path of the original asset
-        // info.query is the query
-        return `${info.path}.gz${info.query}`;
+      filename(pathData) {
+        // The `pathData` argument contains all placeholders - `path`/`name`/`ext`/etc
+        // Available properties described above, for the `String` notation
+        if (/\.svg$/.test(pathData.file)) {
+          return 'assets/svg/[path][base].gz';
+        }
+
+        return 'assets/js/[path][base].gz';
       },
     }),
   ],

src/index.js

@@ -4,7 +4,6 @@
 */
 
 import crypto from 'crypto';
-import url from 'url';
 import path from 'path';
 
 import webpack, {
@@ -33,7 +32,7 @@ class CompressionPlugin {
       cache = true,
       algorithm = 'gzip',
       compressionOptions = {},
-      filename = '[path].gz',
+      filename = '[base].gz',
       threshold = 0,
       minRatio = 0.8,
       deleteOriginalAssets = false,
@@ -74,27 +73,6 @@ class CompressionPlugin {
     }
   }
 
-  static interpolateName(originalFilename, filename) {
-    const parse = url.parse(originalFilename);
-    const { pathname } = parse;
-    const { dir, name, ext } = path.parse(pathname);
-    const info = {
-      file: originalFilename,
-      path: pathname,
-      dir: dir ? `${dir}/` : '',
-      name,
-      ext,
-      query: parse.query ? `?${parse.query}` : '',
-    };
-
-    return typeof filename === 'function'
-      ? filename(info)
-      : filename.replace(
-          /\[(file|path|query|dir|name|ext)]/g,
-          (p0, p1) => info[p1]
-        );
-  }
-
   // eslint-disable-next-line consistent-return
   static getAsset(compilation, name) {
     // New API
@@ -254,23 +232,48 @@ class CompressionPlugin {
             return;
           }
 
-          const newAssetName = CompressionPlugin.interpolateName(
-            name,
-            this.options.filename
+          const match = /^([^?#]*)(\?[^#]*)?(#.*)?$/.exec(name);
+          const [, replacerFile] = match;
+          const replacerQuery = match[2] || '';
+          const replacerFragment = match[3] || '';
+          const replacerExt = path.extname(replacerFile);
+          const replacerBase = path.basename(replacerFile);
+          const replacerName = replacerBase.slice(
+            0,
+            replacerBase.length - replacerExt.length
+          );
+          const replacerPath = replacerFile.slice(
+            0,
+            replacerFile.length - replacerBase.length
+          );
+          const pathData = {
+            file: replacerFile,
+            query: replacerQuery,
+            fragment: replacerFragment,
+            path: replacerPath,
+            base: replacerBase,
+            name: replacerName,
+            ext: replacerExt || '',
+          };
+
+          let newFilename = this.options.filename;
+
+          if (typeof newFilename === 'function') {
+            newFilename = newFilename(pathData);
+          }
+
+          const newName = newFilename.replace(
+            /\[(file|query|fragment|path|base|name|ext)]/g,
+            (p0, p1) => pathData[p1]
           );
 
           const newInfo = { compressed: true };
 
-          if (info.immutable) {
+          if (info.immutable && /(\[name]|\[base]|\[file])/.test(newFilename)) {
             newInfo.immutable = true;
           }
 
-          CompressionPlugin.emitAsset(
-            compilation,
-            newAssetName,
-            output,
-            newInfo
-          );
+          CompressionPlugin.emitAsset(compilation, newName, output, newInfo);
 
           if (this.options.deleteOriginalAssets) {
             // eslint-disable-next-line no-param-reassign
@@ -279,7 +282,7 @@ class CompressionPlugin {
             // TODO `...` required only for webpack@4
             const newOriginalInfo = {
               ...info,
-              related: { [relatedName]: newAssetName },
+              related: { [relatedName]: newName },
             };
 
             CompressionPlugin.updateAsset(

test/CompressionPlugin.test.js

@@ -2,7 +2,10 @@ import zlib from 'zlib';
 import path from 'path';
 
 import webpack from 'webpack';
+import findCacheDir from 'find-cache-dir';
+import cacache from 'cacache';
 
+import Webpack4Cache from '../src/Webpack4Cache';
 import CompressionPlugin from '../src/index';
 
 import {
@@ -17,9 +20,18 @@ import {
   removeCache,
 } from './helpers/index';
 
+const cacheDir1 = findCacheDir({ name: 'compression-webpack-plugin-cache-1' });
+const cacheDir2 = findCacheDir({ name: 'compression-webpack-plugin-cache-2' });
+const cacheDir3 = findCacheDir({ name: 'compression-webpack-plugin-cache-3' });
+
 describe('CompressionPlugin', () => {
-  beforeEach(() => {
-    return removeCache();
+  beforeAll(() => {
+    return Promise.all([
+      removeCache(),
+      cacache.rm.all(cacheDir1),
+      cacache.rm.all(cacheDir2),
+      cacache.rm.all(cacheDir3),
+    ]);
   });
 
   it('should work', async () => {
@@ -148,23 +160,23 @@ describe('CompressionPlugin', () => {
 
     new CompressionPlugin({
       algorithm: 'gzip',
-      filename: '[path].gz',
+      filename: '[path][base].gz',
     }).apply(compiler);
     new CompressionPlugin({
       algorithm: 'brotliCompress',
-      filename: '[path].br',
+      filename: '[path][base].br',
     }).apply(compiler);
     new CompressionPlugin({
       algorithm: (input, options, callback) => {
         return callback(input);
       },
-      filename: '[path].compress',
+      filename: '[path][base].compress',
     }).apply(compiler);
     new CompressionPlugin({
       algorithm: (input, options, callback) => {
         return callback(input);
       },
-      filename: '[path].custom?foo=bar#hash',
+      filename: '[path][base].custom?foo=bar#hash',
     }).apply(compiler);
 
     const stats = await compile(compiler);
@@ -230,6 +242,12 @@ describe('CompressionPlugin', () => {
   });
 
   it('should work and use memory cache without options in the "development" mode', async () => {
+    const getCacheDirectorySpy = jest
+      .spyOn(Webpack4Cache, 'getCacheDirectory')
+      .mockImplementation(() => {
+        return cacheDir1;
+      });
+
     const compiler = getCompiler('./entry.js', {}, { mode: 'development' });
 
     new CompressionPlugin().apply(compiler);
@@ -267,11 +285,19 @@ describe('CompressionPlugin', () => {
       expect(getWarnings(newStats)).toMatchSnapshot('errors');
       expect(getErrors(newStats)).toMatchSnapshot('warnings');
 
+      getCacheDirectorySpy.mockRestore();
+
       resolve();
     });
   });
 
   it('should work and use memory cache when the "cache" option is "true"', async () => {
+    const getCacheDirectorySpy = jest
+      .spyOn(Webpack4Cache, 'getCacheDirectory')
+      .mockImplementation(() => {
+        return cacheDir2;
+      });
+
     const compiler = getCompiler(
       './entry.js',
       {},
@@ -320,11 +346,19 @@ describe('CompressionPlugin', () => {
       expect(getWarnings(newStats)).toMatchSnapshot('errors');
       expect(getErrors(newStats)).toMatchSnapshot('warnings');
 
+      getCacheDirectorySpy.mockRestore();
+
       resolve();
     });
   });
 
   it('should work and use memory cache when the "cache" option is "true" and the asset has been changed', async () => {
+    const getCacheDirectorySpy = jest
+      .spyOn(Webpack4Cache, 'getCacheDirectory')
+      .mockImplementation(() => {
+        return cacheDir3;
+      });
+
     const compiler = getCompiler(
       './entry.js',
       {},
@@ -375,6 +409,8 @@ describe('CompressionPlugin', () => {
       expect(getWarnings(newStats)).toMatchSnapshot('errors');
       expect(getErrors(newStats)).toMatchSnapshot('warnings');
 
+      getCacheDirectorySpy.mockRestore();
+
       resolve();
     });
   });