[functionality] support for multiple files per asset by adding a file extension to the searched asset name

index.js

@@ -1,6 +1,7 @@
 const getChunkFiles = require('./lib/getChunkFiles.js');
 const replaceAssets = require('./lib/replaceAssets.js');
 const createAsset = require('./lib/createAsset.js');
+const findAsset = require('./lib/findAsset.js');
 
 /**
  * A webpack plugin which can be used to replace asset names in compiled chunks.
@@ -34,7 +35,7 @@ InjectAssetsPlugin.prototype = {
                     via a plugin.
                  */
                 const assetFileName = chunkFiles.hasOwnProperty(targetChunkName)
-                    ? chunkFiles[targetChunkName]
+                    ? findAsset(chunkFiles, targetChunkName)
                     : targetChunkName;
 
                 const targetAsset = assets[assetFileName];

lib/findAsset.js

@@ -0,0 +1,22 @@
+/**
+ * Find an asset in a map of asset names to their files. If the searched asset name has a pipe
+ * symbol in it, the part after that is seen as the extension of the file we look for.
+ *
+ * @param {Object} assetFileNames
+ * @param {string} assetName
+ * @return {string}
+ */
+function findAsset (assetFileNames, assetName) {
+    const [assetFileName, assetExtension] = assetName.split('|');
+    const assets = assetFileNames[assetFileName];
+
+    const [asset] = assets.filter(function hasExtension (asset) {
+        return assetExtension
+            ? asset.split('.').pop() === assetExtension
+            : asset;
+    });
+
+    return asset;
+}
+
+module.exports = findAsset;

lib/getChunkFiles.js

@@ -10,7 +10,7 @@ const isRequired = require('./isRequired.js');
  */
 function getChunkFiles (compilation = isRequired('compilation')) {
     return compilation.chunks.reduce(function mapChunksToFiles(files, chunk) {
-        files[chunk.name] = chunk.files[0];
+        files[chunk.name] = chunk.files;
         return files;
     }, {});
 }

lib/replaceAssets.js

@@ -1,3 +1,5 @@
+const findAsset = require('./findAsset.js');
+
 /**
  * The regular expression to find asset names in a string
  *
@@ -6,7 +8,7 @@
 const defaultAssetRegex = /[{]{2}([^}]+)[}]{2}/g;
 
 /**
- * Replaces asset names with the first of the asset files from a webpack compilation.
+ * Replaces asset names with the asset files from a webpack compilation.
  *
  * @param {string} targetSource - a string in which to replace the assets
  * @param {Object} assetFileNames - a map of available asset names and their containing files
@@ -14,12 +16,14 @@ const defaultAssetRegex = /[{]{2}([^}]+)[}]{2}/g;
  */
 function replaceAssets (targetSource, assetFileNames) {
     return targetSource.replace(defaultAssetRegex, function replaceAsset (match, assetName) {
-        if (!(assetFileNames[assetName] && assetFileNames[assetName].length)) {
+        const asset = findAsset(assetFileNames, assetName);
+
+        if (!asset) {
             console.warn(`no asset for '${assetName}' was found`);
             return match;
         }
 
-        return assetFileNames[assetName];
+        return asset;
     });
 }