CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="1.1.7"></a>
+## [1.1.7](https://github.com/webpack/file-loader/compare/v1.1.6...v1.1.7) (2018-02-19)
+
+
+### Bug Fixes
+
+* **index:** don't concat `options.outputPath` and `options.publicPath` ([#246](https://github.com/webpack/file-loader/issues/246)) ([98bf052](https://github.com/webpack/file-loader/commit/98bf052))
+
+
+
 <a name="1.1.6"></a>
 ## [1.1.6](https://github.com/webpack/file-loader/compare/v1.1.5...v1.1.6) (2017-12-16)
 

README.md

@@ -58,9 +58,10 @@ Emits `file.png` as file in the output directory and returns the public URL
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
 |**`name`**|`{String\|Function}`|`[hash].[ext]`|Configure a custom filename template for your file|
+|**`regExp`**|`{RegExp}`|`'undefined'`|Let you extract some parts of the file path to reuse them in the `name` property|
 |**`context`**|`{String}`|`this.options.context`|Configure a custom file context, defaults to `webpack.config.js` [context](https://webpack.js.org/configuration/entry-context/#context)|
-|**`publicPath`**|`{String\|Function}`|[`__webpack_public_path__ `](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)|Configure a custom `public` path for your files|
-|**`outputPath`**|`{String\|Function}`|`'undefined'`|Configure a custom `output` path for your files|
+|**`publicPath`**|`{String\|Function}`|[`__webpack_public_path__ `](https://webpack.js.org/api/module-variables/#__webpack_public_path__-webpack-specific-)|Configure a custom `public` path for your file|
+|**`outputPath`**|`{String\|Function}`|`'undefined'`|Configure a custom `output` path for your file|
 |**`useRelativePath`**|`{Boolean}`|`false`|Should be `true` if you wish to generate a `context` relative URL for each file|
 |**`emitFile`**|`{Boolean}`|`true`|By default a file is emitted, however this can be disabled if required (e.g. for server side packages)|
 
@@ -98,6 +99,29 @@ You can configure a custom filename template for your file using the query param
 }
 ```
 
+### `regExp`
+
+Defines a `regExp` to match some parts of the file path. These capture groups can be reused in the `name` property using `[N]` placeholder. Note that `[0]` will be replaced by the entire tested string, whereas `[1]` will contain the first capturing parenthesis of your regex and so on...
+
+```js
+import img from './customer01/file.png'
+```
+
+**webpack.config.js**
+```js
+{
+  loader: 'file-loader',
+  options: {
+    regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
+    name: '[1]-[name].[ext]'
+  }  
+}
+```
+
+```
+customer01-file.png
+```
+
 #### `placeholders`
 
 |Name|Type|Default|Description|
@@ -106,7 +130,7 @@ You can configure a custom filename template for your file using the query param
 |**`[name]`**|`{String}`|`file.basename`|The basename of the resource|
 |**`[path]`**|`{String}`|`file.dirname`|The path of the resource relative to the `context`|
 |**`[hash]`**|`{String}`|`md5`|The hash of the content, hashes below for more info|
-|**`[N]`**|`{Number}`|``|The `n-th` match obtained from matching the current file name against the query param `regExp`|
+|**`[N]`**|`{String}`|``|The `n-th` match obtained from matching the current file name against the `regExp`|
 
 #### `hashes`
 
@@ -115,7 +139,7 @@ You can configure a custom filename template for your file using the query param
 |Name|Type|Default|Description|
 |:--:|:--:|:-----:|:----------|
 |**`hashType`**|`{String}`|`md5`|`sha1`, `md5`, `sha256`, `sha512`|
-|**`digestType`**|`{String}`|`base64`|`hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`|
+|**`digestType`**|`{String}`|`hex`|`hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`|
 |**`length`**|`{Number}`|`9999`|The length in chars|
 
 By default, the path and name you specify will output the file in that same directory and will also use that same URL path to access the file.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-loader",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "author": "Tobias Koppers @sokra",
   "description": "file loader module for webpack",
   "license": "MIT",
@@ -13,7 +13,7 @@
   ],
   "dependencies": {
     "loader-utils": "^1.0.2",
-    "schema-utils": "^0.3.0"
+    "schema-utils": "^0.4.5"
   },
   "devDependencies": {
     "babel-cli": "^6.0.0",

src/index.js

@@ -10,7 +10,7 @@ export default function loader(content) {
 
   validateOptions(schema, options, 'File Loader');
 
-  const context = options.context || this.rootContext || this.options && this.options.context
+  const context = options.context || this.rootContext || (this.options && this.options.context);
 
   let url = loaderUtils.interpolateName(this, options.name, {
     context,
@@ -27,9 +27,8 @@ export default function loader(content) {
     );
   }
 
-  const filePath = this.resourcePath;
-
   if (options.useRelativePath) {
+    const filePath = this.resourcePath;
     const issuerContext = (this._module && this._module.issuer
       && this._module.issuer.context) || context;
 
@@ -44,13 +43,8 @@ export default function loader(content) {
     }
 
     url = relativePath + url;
-  } else if (options.outputPath) {
-    // support functions as outputPath to generate them dynamically
-    outputPath = typeof options.outputPath === 'function' ? options.outputPath(url) : options.outputPath + url;
-
-    url = outputPath;
   } else {
-    outputPath = url;
+    outputPath += url;
   }
 
   let publicPath = `__webpack_public_path__ + ${JSON.stringify(url)}`;

test/__snapshots__/Errors.test.js.snap

@@ -7,9 +7,7 @@ emitFile is required from module system"
 `;
 
 exports[`Errors Validation Error 1`] = `
-"Validation Error
-
-File Loader Invalid Options
+"File Loader Invalid Options
 
 options.useRelativePath should be boolean
 "

test/options/__snapshots__/outputPath.test.js.snap

@@ -1,5 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Options outputPath {Function} 1`] = `"module.exports = __webpack_public_path__ + \\"test/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";"`;
+exports[`Options outputPath {Function} 1`] = `
+Object {
+  "assets": Array [
+    "output_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
 
-exports[`Options outputPath {String} 1`] = `"module.exports = __webpack_public_path__ + \\"/test/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";"`;
+exports[`Options outputPath {Function} with \`publicPath\` {Function} 1`] = `
+Object {
+  "assets": Array [
+    "output_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
+exports[`Options outputPath {Function} with \`publicPath\` {String} 1`] = `
+Object {
+  "assets": Array [
+    "output_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
+exports[`Options outputPath {String} 1`] = `
+Object {
+  "assets": Array [
+    "output_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
+exports[`Options outputPath {String} with \`publicPath\` {Function} 1`] = `
+Object {
+  "assets": Array [
+    "output_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
+exports[`Options outputPath {String} with \`publicPath\` {String} 1`] = `
+Object {
+  "assets": Array [
+    "output_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;

test/options/__snapshots__/publicPath.test.js.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Options publicPath {Function} 1`] = `"module.exports = \\"test/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";"`;
+exports[`Options publicPath {Function} 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
 
-exports[`Options publicPath {String} 1`] = `"module.exports = \\"/test/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";"`;
+exports[`Options publicPath {String} 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;

test/options/outputPath.test.js

@@ -10,15 +10,15 @@ describe('Options', () => {
         loader: {
           test: /(png|jpg|svg)/,
           options: {
-            outputPath: '/test/',
+            outputPath: 'output_path/',
           },
         },
       };
 
       const stats = await webpack('fixture.js', config);
-      const { source } = stats.toJson().modules[1];
+      const { assets, source } = stats.toJson().modules[1];
 
-      expect(source).toMatchSnapshot();
+      expect({ assets, source }).toMatchSnapshot();
     });
 
     test('{Function}', async () => {
@@ -27,16 +27,92 @@ describe('Options', () => {
           test: /(png|jpg|svg)/,
           options: {
             outputPath(url) {
-              return `test/${url}`;
+              return `output_path/${url}`;
             },
           },
         },
       };
 
       const stats = await webpack('fixture.js', config);
-      const { source } = stats.toJson().modules[1];
+      const { assets, source } = stats.toJson().modules[1];
 
-      expect(source).toMatchSnapshot();
+      expect({ assets, source }).toMatchSnapshot();
+    });
+
+    test('{String} with `publicPath` {String}', async () => {
+      const config = {
+        loader: {
+          test: /(png|jpg|svg)/,
+          options: {
+            outputPath: 'output_path/',
+            publicPath: 'public_path/',
+          },
+        },
+      };
+
+      const stats = await webpack('fixture.js', config);
+      const { assets, source } = stats.toJson().modules[1];
+
+      expect({ assets, source }).toMatchSnapshot();
+    });
+
+    test('{Function} with `publicPath` {String}', async () => {
+      const config = {
+        loader: {
+          test: /(png|jpg|svg)/,
+          options: {
+            publicPath: 'public_path/',
+            outputPath(url) {
+              return `output_path/${url}`;
+            },
+          },
+        },
+      };
+
+      const stats = await webpack('fixture.js', config);
+      const { assets, source } = stats.toJson().modules[1];
+
+      expect({ assets, source }).toMatchSnapshot();
+    });
+
+    test('{String} with `publicPath` {Function}', async () => {
+      const config = {
+        loader: {
+          test: /(png|jpg|svg)/,
+          options: {
+            outputPath: 'output_path/',
+            publicPath(url) {
+              return `public_path/${url}`;
+            },
+          },
+        },
+      };
+
+      const stats = await webpack('fixture.js', config);
+      const { assets, source } = stats.toJson().modules[1];
+
+      expect({ assets, source }).toMatchSnapshot();
+    });
+
+    test('{Function} with `publicPath` {Function}', async () => {
+      const config = {
+        loader: {
+          test: /(png|jpg|svg)/,
+          options: {
+            outputPath(url) {
+              return `output_path/${url}`;
+            },
+            publicPath(url) {
+              return `public_path/${url}`;
+            },
+          },
+        },
+      };
+
+      const stats = await webpack('fixture.js', config);
+      const { assets, source } = stats.toJson().modules[1];
+
+      expect({ assets, source }).toMatchSnapshot();
     });
   });
 });

test/options/publicPath.test.js

@@ -10,15 +10,15 @@ describe('Options', () => {
         loader: {
           test: /(png|jpg|svg)/,
           options: {
-            publicPath: '/test/',
+            publicPath: 'public_path/',
           },
         },
       };
 
       const stats = await webpack('fixture.js', config);
-      const { source } = stats.toJson().modules[1];
+      const { assets, source } = stats.toJson().modules[1];
 
-      expect(source).toMatchSnapshot();
+      expect({ assets, source }).toMatchSnapshot();
     });
 
     test('{Function}', async () => {
@@ -27,16 +27,16 @@ describe('Options', () => {
           test: /(png|jpg|svg)/,
           options: {
             publicPath(url) {
-              return `test/${url}`;
+              return `public_path/${url}`;
             },
           },
         },
       };
 
       const stats = await webpack('fixture.js', config);
-      const { source } = stats.toJson().modules[1];
+      const { assets, source } = stats.toJson().modules[1];
 
-      expect(source).toMatchSnapshot();
+      expect({ assets, source }).toMatchSnapshot();
     });
   });
 });