CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.
 
+## [5.1.0](https://github.com/webpack-contrib/file-loader/compare/v5.0.2...v5.1.0) (2020-02-19)
+
+
+### Features
+
+* support the `query` template for the `name` option ([#366](https://github.com/webpack-contrib/file-loader/issues/366)) ([cd8698b](https://github.com/webpack-contrib/file-loader/commit/cd8698b1d9fd560d85e912acca9a1e24f00e18f8))
+
 ### [5.0.2](https://github.com/webpack-contrib/file-loader/compare/v5.0.1...v5.0.2) (2019-11-25)
 
 

README.md

@@ -102,7 +102,10 @@ module.exports = {
         test: /\.(png|jpe?g|gif)$/i,
         loader: 'file-loader',
         options: {
-          name(file) {
+          name(resourcePath, resourceQuery) {
+            // `resourcePath` - `/absolute/path/to/file.js`
+            // `resourceQuery` - `?foo=bar`
+
             if (process.env.NODE_ENV === 'development') {
               return '[path][name].[ext]';
             }
@@ -378,12 +381,12 @@ module.exports = {
 ### `esModule`
 
 Type: `Boolean`
-Default: `false`
+Default: `true`
 
 By default, `file-loader` generates JS modules that use the ES modules syntax.
 There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
 
-You can enable a CommonJS module using:
+You can enable a CommonJS module syntax using:
 
 **webpack.config.js**
 
@@ -439,6 +442,13 @@ Default: `file.folder`
 
 The folder of the resource is in.
 
+### `[query]`
+
+Type: `String`
+Default: `file.query`
+
+The query of the resource, i.e. `?foo=bar`.
+
 ### `[emoji]`
 
 Type: `String`
@@ -619,14 +629,55 @@ Result:
 path/to/file.png?e43b20c069c4a01867c31e98cbce33c9
 ```
 
+### CDN
+
+The following examples show how to use `file-loader` for CDN uses query params.
+
+**file.js**
+
+```js
+import png from './directory/image.png?width=300&height=300';
+```
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  output: {
+    publicPath: 'https://cdn.example.com/',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|gif)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[path][name].[ext][query]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+Result:
+
+```bash
+# result
+https://cdn.example.com/directory/image.png?width=300&height=300
+```
+
 ### 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':
@@ -641,6 +692,8 @@ const assetPrefixForNamespace = (namespace) => {
       return '';
   }
 };
+const namespace = process.env.NAMESPACE;
+
 __webpack_public_path__ = `${assetPrefixForNamespace(namespace)}/`;
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-loader",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "A file loader module for webpack",
   "license": "MIT",
   "repository": "webpack-contrib/file-loader",
@@ -41,36 +41,36 @@
     "webpack": "^4.0.0 || ^5.0.0"
   },
   "dependencies": {
-    "loader-utils": "^1.2.3",
+    "loader-utils": "^1.4.0",
     "schema-utils": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.4",
-    "@babel/core": "^7.7.4",
-    "@babel/preset-env": "^7.7.4",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
-    "@webpack-contrib/defaults": "^6.2.0",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^8.3.4",
+    "@webpack-contrib/defaults": "^6.3.0",
     "@webpack-contrib/eslint-config-webpack": "^3.0.0",
-    "babel-jest": "^24.9.0",
-    "commitlint-azure-pipelines-cli": "^1.0.2",
-    "cross-env": "^6.0.3",
+    "babel-jest": "^25.1.0",
+    "commitlint-azure-pipelines-cli": "^1.0.3",
+    "cross-env": "^7.0.0",
     "del": "^5.1.0",
     "del-cli": "^3.0.0",
-    "eslint": "^6.7.1",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-plugin-import": "^2.18.2",
-    "husky": "^3.1.0",
-    "jest": "^24.9.0",
-    "jest-junit": "^9.0.0",
-    "lint-staged": "^9.4.3",
-    "memfs": "^2.16.1",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-import": "^2.20.1",
+    "husky": "^4.2.3",
+    "jest": "^25.1.0",
+    "jest-junit": "^10.0.0",
+    "lint-staged": "^10.0.7",
+    "memfs": "^3.1.1",
     "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
-    "standard-version": "^7.0.1",
-    "url-loader": "^2.3.0",
-    "webpack": "^4.41.2"
+    "standard-version": "^7.1.0",
+    "url-loader": "^3.0.0",
+    "webpack": "^4.41.6"
   },
   "keywords": [
     "webpack"

src/options.json

@@ -58,6 +58,7 @@
       ]
     },
     "esModule": {
+      "description": "By default, file-loader generates JS modules that use the ES modules syntax.",
       "type": "boolean"
     }
   },

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

@@ -1,14 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`"name" option should work for CDN support query params: errors 1`] = `Array []`;
+
+exports[`"name" option should work for CDN support query params: result 1`] = `"https://cdn.example.com/nested/file.png?foo=bar"`;
+
+exports[`"name" option should work for CDN support query params: warnings 1`] = `Array []`;
+
 exports[`"name" option should work with "Function" value: errors 1`] = `Array []`;
 
-exports[`"name" option should work with "Function" value: result 1`] = `"9c87cbf3ba33126ffd25ae7f2f6bbafb.function.png"`;
+exports[`"name" option should work with "Function" value: result 1`] = `"9c87cbf3ba33126ffd25ae7f2f6bbafb.function.png?foo=bar"`;
 
 exports[`"name" option should work with "Function" value: warnings 1`] = `Array []`;
 
 exports[`"name" option should work with "String" value: errors 1`] = `Array []`;
 
-exports[`"name" option should work with "String" value: result 1`] = `"9c87cbf3ba33126ffd25ae7f2f6bbafb.string.png"`;
+exports[`"name" option should work with "String" value: result 1`] = `"9c87cbf3ba33126ffd25ae7f2f6bbafb.string.png?foo=bar"`;
 
 exports[`"name" option should work with "String" value: warnings 1`] = `Array []`;
 

test/__snapshots__/validate-options.test.js.snap

@@ -1,24 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`validate options should throw an error on the "context" option with "true" value 1`] = `
-"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. File Loader has been initialized using an options object that does not match the API schema.
  - options.context should be a string.
    -> A custom file context (https://github.com/webpack-contrib/file-loader#context)."
 `;
 
 exports[`validate options should throw an error on the "emitFile" option with "true" value 1`] = `
-"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. File Loader has been initialized using an options object that does not match the API schema.
  - options.emitFile should be a boolean.
    -> Enables/Disables emit files (https://github.com/webpack-contrib/file-loader#emitfile)."
 `;
 
 exports[`validate options should throw an error on the "esModule" option with "true" value 1`] = `
-"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
- - options.esModule should be a boolean."
+"Invalid options object. File Loader has been initialized using an options object that does not match the API schema.
+ - options.esModule should be a boolean.
+   -> By default, file-loader generates JS modules that use the ES modules syntax."
 `;
 
 exports[`validate options should throw an error on the "name" option with "true" value 1`] = `
-"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. File Loader has been initialized using an options object that does not match the API schema.
  - options.name should be one of these:
    string | function
    -> The filename template for the target file(s) (https://github.com/webpack-contrib/file-loader#name).
@@ -28,7 +29,7 @@ exports[`validate options should throw an error on the "name" option with "true"
 `;
 
 exports[`validate options should throw an error on the "outputPath" option with "true" value 1`] = `
-"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. File Loader has been initialized using an options object that does not match the API schema.
  - options.outputPath should be one of these:
    string | function
    -> A filesystem path where the target file(s) will be placed (https://github.com/webpack-contrib/file-loader#outputpath).
@@ -38,7 +39,7 @@ exports[`validate options should throw an error on the "outputPath" option with
 `;
 
 exports[`validate options should throw an error on the "publicPath" option with "true" value 1`] = `
-"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. File Loader has been initialized using an options object that does not match the API schema.
  - options.publicPath should be one of these:
    string | function
    -> A custom public path for the target file(s) (https://github.com/webpack-contrib/file-loader#publicpath).
@@ -48,7 +49,7 @@ exports[`validate options should throw an error on the "publicPath" option with
 `;
 
 exports[`validate options should throw an error on the "regExp" option with "true" value 1`] = `
-"Invalid options object. File Loader has been initialised using an options object that does not match the API schema.
+"Invalid options object. File Loader has been initialized using an options object that does not match the API schema.
  - options.regExp should be one of these:
    string | RegExp
    -> A Regular Expression to one or many parts of the target file path. The capture groups can be reused in the name property using [N] placeholder (https://github.com/webpack-contrib/file-loader#regexp).

test/fixtures/cdn.js

@@ -0,0 +1,6 @@
+/* eslint-disable */
+import png from './nested/file.png?foo=bar#hash';
+
+__export__ = png;
+
+export default png;

test/fixtures/simple.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import png from './file.png';
+import png from './file.png?foo=bar';
 
 __export__ = png;
 

test/name-option.test.js

@@ -1,3 +1,5 @@
+import path from 'path';
+
 import {
   compile,
   execute,
@@ -22,7 +24,7 @@ describe('"name" option', () => {
 
   it('should work with "String" value', async () => {
     const compiler = getCompiler('simple.js', {
-      name: '[hash].string.[ext]',
+      name: '[hash].string.[ext][query]',
     });
     const stats = await compile(compiler);
 
@@ -37,8 +39,11 @@ describe('"name" option', () => {
 
   it('should work with "Function" value', async () => {
     const compiler = getCompiler('simple.js', {
-      name() {
-        return '[hash].function.[ext]';
+      name(resourcePath, resourceQuery) {
+        expect(resourcePath).toBeDefined();
+        expect(resourceQuery).toBeDefined();
+
+        return '[hash].function.[ext][query]';
       },
     });
     const stats = await compile(compiler);
@@ -51,4 +56,30 @@ describe('"name" option', () => {
     );
     expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
   });
+
+  it('should work for CDN support query params', async () => {
+    const compiler = getCompiler(
+      'cdn.js',
+      {
+        name: '[path][name].[ext][query]',
+      },
+      {
+        output: {
+          path: path.resolve(__dirname, './outputs'),
+          publicPath: 'https://cdn.example.com/',
+          filename: '[name].bundle.js',
+          chunkFilename: '[name].chunk.js',
+        },
+      }
+    );
+    const stats = await compile(compiler);
+
+    expect(
+      execute(readAsset('main.bundle.js', compiler, stats))
+    ).toMatchSnapshot('result');
+    expect(normalizeErrors(stats.compilation.warnings)).toMatchSnapshot(
+      'warnings'
+    );
+    expect(normalizeErrors(stats.compilation.errors)).toMatchSnapshot('errors');
+  });
 });