feat: add dir, name and ext placeholders in filename option (#144)

README.md

@@ -127,13 +127,20 @@ The target asset filename.
 
 `[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.
 
 ```js
 // in your webpack.config.js
 new CompressionPlugin({
   filename: '[path].gz[query]',
 });
+
+new CompressionPlugin({
+  filename: '[dir][name].gz[ext][query]',
+});
 ```
 
 #### `Function`

src/index.js

@@ -6,6 +6,7 @@ Author Tobias Koppers @sokra
 import os from 'os';
 import crypto from 'crypto';
 import url from 'url';
+import path from 'path';
 
 import async from 'neo-async';
 import RawSource from 'webpack-sources/lib/RawSource';
@@ -143,17 +144,22 @@ class CompressionPlugin {
                 }
 
                 const parse = url.parse(file);
+                const { pathname } = parse;
+                const { dir, name, ext } = path.parse(pathname);
                 const info = {
                   file,
-                  path: parse.pathname,
+                  path: pathname,
+                  dir: dir ? `${dir}/` : '',
+                  name,
+                  ext,
                   query: parse.query ? `?${parse.query}` : '',
                 };
 
                 const newAssetName =
                   typeof filename === 'function'
                     ? filename(info)
                     : filename.replace(
-                        /\[(file|path|query)\]/g,
+                        /\[(file|path|query|dir|name|ext)\]/g,
                         (p0, p1) => info[p1]
                       );
 

test/__snapshots__/filename-option.test.js.snap

@@ -1,5 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`when applied with \`function\` option matches snapshot for \`[dir][name].super-compressed.gz[ext][query]\` value ({String}): assets 1`] = `
+Array [
+  Array [
+    "0.async.js?ver=81982f432266ef1edd1a",
+    130,
+  ],
+  Array [
+    "0.async.super-compressed.gz.js?ver=81982f432266ef1edd1a",
+    117,
+  ],
+  Array [
+    "5b1f36bc41ab31f5b801d48ba1d65781.png",
+    78117,
+  ],
+  Array [
+    "5b1f36bc41ab31f5b801d48ba1d65781.super-compressed.gz.png",
+    73160,
+  ],
+  Array [
+    "96621d3c37d96ad3bf792fcc848d912f.super-compressed.gz.svg",
+    393,
+  ],
+  Array [
+    "96621d3c37d96ad3bf792fcc848d912f.svg",
+    672,
+  ],
+  Array [
+    "js.js?var=81982f432266ef1edd1a",
+    10221,
+  ],
+  Array [
+    "js.super-compressed.gz.js?var=81982f432266ef1edd1a",
+    2802,
+  ],
+]
+`;
+
+exports[`when applied with \`function\` option matches snapshot for \`[dir][name].super-compressed.gz[ext][query]\` value ({String}): errors 1`] = `Array []`;
+
+exports[`when applied with \`function\` option matches snapshot for \`[dir][name].super-compressed.gz[ext][query]\` value ({String}): warnings 1`] = `Array []`;
+
 exports[`when applied with \`function\` option matches snapshot for \`[path].super-compressed.gz[query]\` value ({String}): assets 1`] = `
 Array [
   Array [

test/filename-option.test.js

@@ -39,6 +39,22 @@ describe('when applied with `function` option', () => {
     });
   });
 
+  it('matches snapshot for `[dir][name].super-compressed.gz[ext][query]` value ({String})', () => {
+    new Plugin({
+      minRatio: 1,
+      filename: '[dir][name].super-compressed.gz[ext][query]',
+    }).apply(compiler);
+
+    return compile(compiler).then((stats) => {
+      const errors = stats.compilation.errors.map(cleanErrorStack);
+      const warnings = stats.compilation.warnings.map(cleanErrorStack);
+
+      expect(errors).toMatchSnapshot('errors');
+      expect(warnings).toMatchSnapshot('warnings');
+      expect(getAssetsInfo(stats.compilation.assets)).toMatchSnapshot('assets');
+    });
+  });
+
   it('matches snapshot for custom function ({Function})', () => {
     new Plugin({
       minRatio: 1,