file-loader - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Changelog
 
+## [4.2.0](https://github.com/webpack-contrib/file-loader/compare/v4.1.0...v4.2.0) (2019-08-07)
+
+
+### Features
+
+* `postTransformPublicPath` option ([#334](https://github.com/webpack-contrib/file-loader/issues/334)) ([c136f44](https://github.com/webpack-contrib/file-loader/commit/c136f44))
+
+
+
 ## [4.1.0](https://github.com/webpack-contrib/file-loader/compare/v4.0.0...v4.1.0) (2019-07-18)
@@ -7,0 +16,0 @@

dist/index.js

@@ -27,3 +27,3 @@ "use strict";
 
-  const url = _loaderUtils.default.interpolateName(this, options.name, {
+  const url = _loaderUtils.default.interpolateName(this, options.name || '[contenthash].[ext]', {
     context,
@@ -56,2 +56,6 @@ content,
 
+  if (options.postTransformPublicPath) {
+    publicPath = options.postTransformPublicPath(publicPath);
+  }
+
   if (typeof options.emitFile === 'undefined' || options.emitFile) {
@@ -58,0 +62,0 @@ this.emitFile(outputPath, content);

dist/options.json

@@ -37,2 +37,6 @@ {
     },
+    "postTransformPublicPath": {
+      "description": "A custom transformation function for post-processing the publicPath (https://github.com/webpack-contrib/file-loader#posttransformpublicpath).",
+      "instanceof": "Function"
+    },
     "context": {
@@ -39,0 +43,0 @@ "description": "A custom file context (https://github.com/webpack-contrib/file-loader#context).",

package.json

 {
   "name": "file-loader",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "A file loader module for webpack",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -44,7 +44,6 @@ <div align="center">
       {
-        test: /\.(png|jpe?g|gif)$/,
+        test: /\.(png|jpe?g|gif)$/i,
         use: [
           {
             loader: 'file-loader',
-            options: {},
           },
@@ -69,3 +68,3 @@ ],
 Type: `String|Function`
-Default: `'[hash].[ext]'`
+Default: `'[contenthash].[ext]'`
 
@@ -85,11 +84,7 @@ Specifies a custom filename template for the target file(s) using the query
       {
-        test: /\.(png|jpe?g|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[path][name].[ext]',
-            },
-          },
-        ],
+        test: /\.(png|jpe?g|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[path][name].[ext]',
+        },
       },
@@ -110,17 +105,13 @@ ],
       {
-        test: /\.(png|jpe?g|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name(file) {
-                if (process.env.NODE_ENV === 'development') {
-                  return '[path][name].[ext]';
-                }
+        test: /\.(png|jpe?g|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          name(file) {
+            if (process.env.NODE_ENV === 'development') {
+              return '[path][name].[ext]';
+            }
 
-                return '[hash].[ext]';
-              },
-            },
+            return '[contenthash].[ext]';
           },
-        ],
+        },
       },
@@ -150,11 +141,7 @@ ],
       {
-        test: /\.(png|jpe?g|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              outputPath: 'images',
-            },
-          },
-        ],
+        test: /\.(png|jpe?g|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          outputPath: 'images',
+        },
       },
@@ -175,27 +162,23 @@ ],
       {
-        test: /\.(png|jpe?g|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              outputPath: (url, resourcePath, context) => {
-                // `resourcePath` is original absolute path to asset
-                // `context` is directory where stored asset (`rootContext`) or `context` option
+        test: /\.(png|jpe?g|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          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);
+            // 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 (/my-custom-image\.png/.test(resourcePath)) {
+              return `other_output_path/${url}`;
+            }
 
-                if (/images/.test(context)) {
-                  return `image_output_path/${url}`;
-                }
+            if (/images/.test(context)) {
+              return `image_output_path/${url}`;
+            }
 
-                return `output_path/${url}`;
-              },
-            },
+            return `output_path/${url}`;
           },
-        ],
+        },
       },
@@ -223,11 +206,7 @@ ],
       {
-        test: /\.(png|jpe?g|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              publicPath: 'assets',
-            },
-          },
-        ],
+        test: /\.(png|jpe?g|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          publicPath: 'assets',
+        },
       },
@@ -248,27 +227,23 @@ ],
       {
-        test: /\.(png|jpe?g|gif)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              publicPath: (url, resourcePath, context) => {
-                // `resourcePath` is original absolute path to asset
-                // `context` is directory where stored asset (`rootContext`) or `context` option
+        test: /\.(png|jpe?g|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          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);
+            // 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 (/my-custom-image\.png/.test(resourcePath)) {
+              return `other_public_path/${url}`;
+            }
 
-                if (/images/.test(context)) {
-                  return `image_output_path/${url}`;
-                }
+            if (/images/.test(context)) {
+              return `image_output_path/${url}`;
+            }
 
-                return `public_path/${url}`;
-              },
-            },
+            return `public_path/${url}`;
           },
-        ],
+        },
       },
@@ -280,2 +255,28 @@ ],
 
+### `postTransformPublicPath`
+
+Type: `Function`
+Default: `undefined`
+
+Specifies a custom function to post-process the generated public path. This can be used to prepend or append dynamic global variables that are only available at runtime, like `__webpack_public_path__`. This would not be possible with just `publicPath`, since it stringifies the values.
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpg|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          publicPath: '/some/path/',
+          postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
+        },
+      },
+    ],
+  },
+};
+```
+
 ### `context`
@@ -293,3 +294,3 @@
       {
-        test: /\.(png|jpe?g|gif)$/,
+        test: /\.(png|jpe?g|gif)$/i,
         use: [
@@ -332,3 +333,3 @@ {
       {
-        test: /\.css$/,
+        test: /\.css$/i,
         use: [
@@ -370,3 +371,3 @@ {
       {
-        test: /\.(png|jpe?g|gif)$/,
+        test: /\.(png|jpe?g|gif)$/i,
         use: [
@@ -376,3 +377,3 @@ {
             options: {
-              regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/,
+              regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.png$/i,
               name: '[1]-[name].[ext]',
@@ -443,2 +444,9 @@ },
 
+### `[contenthash]`
+
+Type: `String`
+Default: `md5`
+
+Specifies the hash method to use for hashing the file content.
+
 ### `[<hashType>:hash:<digestType>:<length>]`
@@ -483,2 +491,4 @@
 
+### Names
+
 The following examples show how one might use `file-loader` and what the result would be.
@@ -499,3 +509,3 @@
       {
-        test: /\.(png|jpe?g|gif)$/,
+        test: /\.(png|jpe?g|gif)$/i,
         use: [
@@ -505,3 +515,3 @@ {
             options: {
-              name: 'dirname/[hash].[ext]',
+              name: 'dirname/[contenthash].[ext]',
             },
@@ -538,3 +548,3 @@ },
       {
-        test: /\.(png|jpe?g|gif)$/,
+        test: /\.(png|jpe?g|gif)$/i,
         use: [
@@ -576,3 +586,3 @@ {
       {
-        test: /\.(png|jpe?g|gif)$/,
+        test: /\.(png|jpe?g|gif)$/i,
         use: [
@@ -582,3 +592,3 @@ {
             options: {
-              name: '[path][name].[ext]?[hash]',
+              name: '[path][name].[ext]?[contenthash]',
             },
@@ -600,2 +610,68 @@ },
 
+### Dynamic public path depending on environment variable at run time
+
+An application might want to configure different CDN hosts depending on an environment variable that is only available when running the application. This can be an advantage, as only one build of the application is necessary, which behaves differntly depending on environment variables of the deployment environment. Since file-loader is applied when compiling the application, and not when running it, the environment variable cannot be used in the file-loader configuration. A way around this is setting the `__webpack_public_path__` to the desired CDN host depending on the environment variable at the entrypoint of the application. The option `postTransformPublicPath` can be used to configure a custom path depending on a variable like `__webpack_public_path__`.
+
+**main.js**
+
+```js
+const namespace = process.env.NAMESPACE;
+const assetPrefixForNamespace = (namespace) => {
+  switch (namespace) {
+    case 'prod':
+      return 'https://cache.myserver.net/web';
+    case 'uat':
+      return 'https://cache-uat.myserver.net/web';
+    case 'st':
+      return 'https://cache-st.myserver.net/web';
+    case 'dev':
+      return 'https://cache-dev.myserver.net/web';
+    default:
+      return '';
+  }
+};
+__webpack_public_path__ = `${assetPrefixForNamespace(namespace)}/`;
+```
+
+**file.js**
+
+```js
+import png from './image.png';
+```
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpg|gif)$/i,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[contenthash].[ext]',
+          outputPath: 'static/assets/',
+          publicPath: 'static/assets/',
+          postTransformPublicPath: (p) => `__webpack_public_path__ + ${p}`,
+        },
+      },
+    ],
+  },
+};
+```
+
+Result when run with `NAMESPACE=prod` env variable:
+
+```bash
+# result
+https://cache.myserver.net/web/static/assets/image.somehash.png
+```
+
+Result when run with `NAMESPACE=dev` env variable:
+
+```bash
+# result
+https://cache-dev.myserver.net/web/static/assets/image.somehash.png
+```
+
 ## Contributing
@@ -602,0 +678,0 @@

No alert changes

Improved metrics

Total package byte prevSize

31988

increased by10.56%

Lines of code

114

increased by6.54%

Number of lines in readme file

680

increased by12.58%

No dependency changes