embedding fix: shellscape/webpack-manifest-plugin#249

fixtures/js/import_node_modules_image.js

@@ -0,0 +1,10 @@
+// this helps us trigger a manifest.json bug
+// https://github.com/shellscape/webpack-manifest-plugin/pull/249
+import 'mocha/assets/growl/ok.png';
+import '../images/symfony_logo.png';
+
+
+// module.userRequest
+// growl: /Users/weaverryan/Sites/os/webpack-encore/node_modules/mocha/assets/growl/ok.png
+// logo:  /Users/weaverryan/Sites/os/webpack-encore/test_tmp/51witp/images/symfony_logo.png
+

lib/plugins/manifest.js

@@ -10,7 +10,7 @@
 'use strict';
 
 const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
+const { WebpackManifestPlugin } = require('../webpack-manifest-plugin/index');
 const PluginPriorities = require('./plugin-priorities');
 const applyOptionsCallback = require('../utils/apply-options-callback');
 const copyEntryTmpName = require('../utils/copyEntryTmpName');

lib/webpack-manifest-plugin/helpers.js

@@ -1,3 +1,5 @@
+const { dirname, join, basename } = require('path');
+
 const generateManifest = (compilation, files, { generate, seed = {} }) => {
   let result;
   if (generate) {
@@ -25,7 +27,13 @@ const getFileType = (fileName, { transformExtensions }) => {
 };
 
 const reduceAssets = (files, asset, moduleAssets) => {
-  const name = moduleAssets[asset.name] ? moduleAssets[asset.name] : asset.info.sourceFilename;
+  let name;
+  if (moduleAssets[asset.name]) {
+    name = moduleAssets[asset.name];
+  } else if (asset.info.sourceFilename) {
+    name = join(dirname(asset.name), basename(asset.info.sourceFilename));
+  }
+
   if (name) {
     return files.concat({
       path: asset.name,
@@ -52,29 +60,43 @@ const reduceAssets = (files, asset, moduleAssets) => {
   });
 };
 
-const reduceChunk = (files, chunk, options) =>
-  Array.of(...Array.from(chunk.files), ...Array.from(chunk.auxiliaryFiles || [])).reduce(
-    (prev, path) => {
-      let name = chunk.name ? chunk.name : null;
-      // chunk name, or for nameless chunks, just map the files directly.
-      name = name
-        ? options.useEntryKeys && !path.endsWith('.map')
-          ? name
-          : `${name}.${getFileType(path, options)}`
-        : path;
+const reduceChunk = (files, chunk, options, auxiliaryFiles) => {
+  // auxiliary files contain things like images, fonts AND, most
+  // importantly, other files like .map sourcemap files
+  // we modify the auxiliaryFiles so that we can add any of these
+  // to the manifest that was not added by another method
+  // (sourcemaps files are not added via any other method)
+  Array.from(chunk.auxiliaryFiles || []).forEach((auxiliaryFile) => {
+    auxiliaryFiles[auxiliaryFile] = {
+      path: auxiliaryFile,
+      name: basename(auxiliaryFile),
+      isInitial: false,
+      isChunk: false,
+      isAsset: true,
+      isModuleAsset: true
+    };
+  });
+
+  return Array.from(chunk.files).reduce((prev, path) => {
+    let name = chunk.name ? chunk.name : null;
+    // chunk name, or for nameless chunks, just map the files directly.
+    name = name
+      ? options.useEntryKeys && !path.endsWith('.map')
+        ? name
+        : `${name}.${getFileType(path, options)}`
+      : path;
 
-      return prev.concat({
-        path,
-        chunk,
-        name,
-        isInitial: chunk.isOnlyInitial(),
-        isChunk: true,
-        isAsset: false,
-        isModuleAsset: false
-      });
-    },
-    files
-  );
+    return prev.concat({
+      path,
+      chunk,
+      name,
+      isInitial: chunk.isOnlyInitial(),
+      isChunk: true,
+      isAsset: false,
+      isModuleAsset: false
+    });
+  }, files);
+};
 
 const standardizeFilePaths = (file) => {
   const result = Object.assign({}, file);

lib/webpack-manifest-plugin/hooks.js

@@ -51,8 +51,9 @@ const emitHook = function emit(
 
   emitCountMap.set(manifestFileName, emitCount);
 
+  const auxiliaryFiles = {};
   let files = Array.from(compilation.chunks).reduce(
-    (prev, chunk) => reduceChunk(prev, chunk, options),
+    (prev, chunk) => reduceChunk(prev, chunk, options, auxiliaryFiles),
     []
   );
 
@@ -66,6 +67,17 @@ const emitHook = function emit(
       typeof emitCountMap.get(join(compiler.options.output.path, name)) === 'undefined'
   );
 
+  // auxiliary files are "extra" files that are probably already included
+  // in other ways. Loop over files and remove any from auxiliaryFiles
+  files.forEach((file) => {
+    delete auxiliaryFiles[file.path];
+  });
+  // if there are any auxiliaryFiles left, add them to the files
+  // this handles, specifically, sourcemaps
+  Object.keys(auxiliaryFiles).forEach((auxiliaryFile) => {
+    files = files.concat(auxiliaryFiles[auxiliaryFile]);
+  });
+
   files = files.map((file) => {
     const changes = {
       // Append optional basepath onto all references. This allows output path to be reflected in the manifest.

test/functional.js

@@ -152,6 +152,26 @@ describe('Functional tests using webpack', function() {
             });
         });
 
+        it('Check manifest.json with node_module includes', (done) => {
+            const config = createWebpackConfig('web/build', 'dev');
+            config.addEntry('main', './js/import_node_modules_image');
+            config.setPublicPath('/build');
+
+            testSetup.runWebpack(config, (webpackAssert) => {
+                // should have a main.js file
+                // should have a manifest.json with public/main.js
+
+                webpackAssert.assertOutputJsonFileMatches('manifest.json', {
+                    'build/main.js': '/build/main.js',
+                    'build/runtime.js': '/build/runtime.js',
+                    'build/images/symfony_logo.png': '/build/images/symfony_logo.91beba37.png',
+                    'build/images/ok.png': '/build/images/ok.c3f4e113.png',
+                });
+
+                done();
+            });
+        });
+
         it('Use "all" splitChunks & look at entrypoints.json', (done) => {
             const config = createWebpackConfig('web/build', 'dev');
             config.addEntry('main', ['./css/roboto_font.css', './js/no_require', 'vue']);