feat: context is now available in outputPath and publicPath (#305)

Author: evilebottnawi

README.md

@@ -180,11 +180,20 @@ Specify a filesystem path where the target file(s) will be placed.
   loader: 'file-loader',
   options: {
     name: '[path][name].[ext]',
-    outputPath: (url, resourcePath) => {
+    outputPath: (url, resourcePath, context) => {
       // `resourcePath` is original absolute path to asset
+      // `context` is directory where stored asset (`rootContext`) or `context` option
+      
+      // To get relative path you can use
+      // const relativePath = path.relative(context, resourcePath);
+      
       if (/my-custom-image\.png/.test(resourcePath)) {
         return `other_output_path/${url}`
       }
+      
+      if (/images/.test(context)) {
+        return `image_output_path/${url}`;
+      }
 
       return `output_path/${url}`;
     },
@@ -224,11 +233,20 @@ Specifies a custom public path for the target file(s).
   loader: 'file-loader',
   options: {
     name: '[path][name].[ext]',
-    publicPath: (url, resourcePath) {
+    publicPath: (url, resourcePath, context) => {
       // `resourcePath` is original absolute path to asset
+      // `context` is directory where stored asset (`rootContext`) or `context` option
+      
+      // To get relative path you can use
+      // const relativePath = path.relative(context, resourcePath);
+      
       if (/my-custom-image\.png/.test(resourcePath)) {
         return `other_public_path/${url}`
       }
+      
+      if (/images/.test(context)) {
+        return `image_output_path/${url}`;
+      }
 
       return `public_path/${url}`;
     }

src/index.js

@@ -22,7 +22,7 @@ export default function loader(content) {
 
   if (options.outputPath) {
     if (typeof options.outputPath === 'function') {
-      outputPath = options.outputPath(url, this.resourcePath);
+      outputPath = options.outputPath(url, this.resourcePath, context);
     } else {
       outputPath = path.posix.join(options.outputPath, url);
     }
@@ -55,7 +55,7 @@ export default function loader(content) {
 
   if (options.publicPath) {
     if (typeof options.publicPath === 'function') {
-      publicPath = options.publicPath(url, this.resourcePath);
+      publicPath = options.publicPath(url, this.resourcePath, context);
     } else if (options.publicPath.endsWith('/')) {
       publicPath = options.publicPath + url;
     } else {

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

@@ -9,6 +9,15 @@ Object {
 }
 `;
 
+exports[`when applied with \`outputPath\` option matches snapshot for \`{Function}\` value and pass \`context\` 1`] = `
+Object {
+  "assets": Array [
+    "output_path_func/9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = __webpack_public_path__ + \\"output_path_func/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
 exports[`when applied with \`outputPath\` option matches snapshot for \`{Function}\` value and pass \`resourcePath\` 1`] = `
 Object {
   "assets": Array [

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

@@ -9,6 +9,15 @@ Object {
 }
 `;
 
+exports[`when applied with \`publicPath\` option matches snapshot for \`{Function}\` value and pass \`context\` 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = \\"public_path/9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
 exports[`when applied with \`publicPath\` option matches snapshot for \`{Function}\` value and pass \`resourcePath\` 1`] = `
 Object {
   "assets": Array [

test/outputPath-option.test.js

@@ -210,4 +210,25 @@ describe('when applied with `outputPath` option', () => {
 
     expect({ assets, source }).toMatchSnapshot();
   });
+
+  it('matches snapshot for `{Function}` value and pass `context`', async () => {
+    const config = {
+      loader: {
+        test: /(png|jpg|svg)/,
+        options: {
+          outputPath(url, resourcePath, context) {
+            expect(context).toMatch('fixtures');
+
+            return `output_path_func/${url}`;
+          },
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [module] = stats.toJson().modules;
+    const { assets, source } = module;
+
+    expect({ assets, source }).toMatchSnapshot();
+  });
 });

test/publicPath-option.test.js

@@ -91,4 +91,25 @@ describe('when applied with `publicPath` option', () => {
 
     expect({ assets, source }).toMatchSnapshot();
   });
+
+  it('matches snapshot for `{Function}` value and pass `context`', async () => {
+    const config = {
+      loader: {
+        test: /(png|jpg|svg)/,
+        options: {
+          publicPath(url, resourcePath, context) {
+            expect(context).toMatch('fixtures');
+
+            return `public_path/${url}`;
+          },
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [module] = stats.toJson().modules;
+    const { assets, source } = module;
+
+    expect({ assets, source }).toMatchSnapshot();
+  });
 });