bug #921 Fixing manifest paths (by temporarily embedding webpack-manifest-plugin fix) (weaverryan)

This PR was squashed before being merged into the main branch.

Discussion
----------

Fixing manifest paths (by temporarily embedding webpack-manifest-plugin fix)

This temporarily embeds shellscape/webpack-manifest-plugin#249, which fixes #907 and also a comment on #914 (comment)

To test this:

```
$ yarn remove @symfony/webpack-encore
$ yarn add git://github.com/weaverryan/webpack-encore.git#try-manifest-fix
```

Please let me know if this does or doesn't fix your `manifest.json` file. I'm also interested in hearing from Windows users, as the fix requires some "path" manipulation.

Thanks!

Commits
-------

b81428d Fixing manifest paths (by temporarily embedding webpack-manifest-plugin fix)

Author: weaverryan

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
         "es6": true,
     },
     "parserOptions": { "ecmaVersion": 2017 },
+    "ignorePatterns": ["lib/webpack-manifest-plugin"],
     "rules": {
         "quotes": ["error", "single"],
         "no-undef": "error",

.github/workflows/node-windows.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node: [ '14', '12', '10' ]
+        node: [ '14', '10' ]
 
     name: ${{ matrix.node }} (Windows)
     steps:

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');
 const PluginPriorities = require('./plugin-priorities');
 const applyOptionsCallback = require('../utils/apply-options-callback');
 const copyEntryTmpName = require('../utils/copyEntryTmpName');

lib/webpack-manifest-plugin/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Dane Thurber <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

lib/webpack-manifest-plugin/README.md

@@ -0,0 +1,6 @@
+# webpack-manifest-plugin
+
+This is a copy of https://github.com/shellscape/webpack-manifest-plugin
+at sha: 9f408f609d9b1af255491036b6fc127777ee6f9a.
+
+It has been modified to fix this bug: https://github.com/shellscape/webpack-manifest-plugin/pull/249

lib/webpack-manifest-plugin/helpers.js

@@ -0,0 +1,115 @@
+const { dirname, join, basename } = require('path');
+
+const generateManifest = (compilation, files, { generate, seed = {} }) => {
+  let result;
+  if (generate) {
+    const entrypointsArray = Array.from(compilation.entrypoints.entries());
+    const entrypoints = entrypointsArray.reduce(
+      (e, [name, entrypoint]) => Object.assign(e, { [name]: entrypoint.getFiles() }),
+      {}
+    );
+    result = generate(seed, files, entrypoints);
+  } else {
+    result = files.reduce(
+      (manifest, file) => Object.assign(manifest, { [file.name]: file.path }),
+      seed
+    );
+  }
+
+  return result;
+};
+
+const getFileType = (fileName, { transformExtensions }) => {
+  const replaced = fileName.replace(/\?.*/, '');
+  const split = replaced.split('.');
+  const extension = split.pop();
+  return transformExtensions.test(extension) ? `${split.pop()}.${extension}` : extension;
+};
+
+const reduceAssets = (files, asset, moduleAssets) => {
+  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,
+      name,
+      isInitial: false,
+      isChunk: false,
+      isAsset: true,
+      isModuleAsset: true
+    });
+  }
+
+  const isEntryAsset = asset.chunks && asset.chunks.length > 0;
+  if (isEntryAsset) {
+    return files;
+  }
+
+  return files.concat({
+    path: asset.name,
+    name: asset.name,
+    isInitial: false,
+    isChunk: false,
+    isAsset: true,
+    isModuleAsset: false
+  });
+};
+
+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);
+};
+
+const standardizeFilePaths = (file) => {
+  const result = Object.assign({}, file);
+  result.name = file.name.replace(/\\/g, '/');
+  result.path = file.path.replace(/\\/g, '/');
+  return result;
+};
+
+const transformFiles = (files, options) =>
+  ['filter', 'map', 'sort']
+    .filter((fname) => !!options[fname])
+    // TODO: deprecate these
+    .reduce((prev, fname) => prev[fname](options[fname]), files)
+    .map(standardizeFilePaths);
+
+module.exports = { generateManifest, reduceAssets, reduceChunk, transformFiles };

lib/webpack-manifest-plugin/hooks.js

@@ -0,0 +1,141 @@
+const { mkdirSync, writeFileSync } = require('fs');
+const { basename, dirname, join } = require('path');
+
+const { SyncWaterfallHook } = require('tapable');
+const webpack = require('webpack');
+// eslint-disable-next-line global-require
+const { RawSource } = webpack.sources || require('webpack-sources');
+
+const { generateManifest, reduceAssets, reduceChunk, transformFiles } = require('./helpers');
+
+const compilerHookMap = new WeakMap();
+
+const getCompilerHooks = (compiler) => {
+  let hooks = compilerHookMap.get(compiler);
+  if (typeof hooks === 'undefined') {
+    hooks = {
+      afterEmit: new SyncWaterfallHook(['manifest']),
+      beforeEmit: new SyncWaterfallHook(['manifest'])
+    };
+    compilerHookMap.set(compiler, hooks);
+  }
+  return hooks;
+};
+
+const beforeRunHook = ({ emitCountMap, manifestFileName }, compiler, callback) => {
+  const emitCount = emitCountMap.get(manifestFileName) || 0;
+  emitCountMap.set(manifestFileName, emitCount + 1);
+
+  /* istanbul ignore next */
+  if (callback) {
+    callback();
+  }
+};
+
+const emitHook = function emit(
+  { compiler, emitCountMap, manifestAssetId, manifestFileName, moduleAssets, options },
+  compilation
+) {
+  const emitCount = emitCountMap.get(manifestFileName) - 1;
+  // Disable everything we don't use, add asset info, show cached assets
+  const stats = compilation.getStats().toJson({
+    all: false,
+    assets: true,
+    cachedAssets: true,
+    ids: true,
+    publicPath: true
+  });
+
+  const publicPath = options.publicPath !== null ? options.publicPath : stats.publicPath;
+  const { basePath, removeKeyHash } = options;
+
+  emitCountMap.set(manifestFileName, emitCount);
+
+  const auxiliaryFiles = {};
+  let files = Array.from(compilation.chunks).reduce(
+    (prev, chunk) => reduceChunk(prev, chunk, options, auxiliaryFiles),
+    []
+  );
+
+  // module assets don't show up in assetsByChunkName, we're getting them this way
+  files = stats.assets.reduce((prev, asset) => reduceAssets(prev, asset, moduleAssets), files);
+
+  // don't add hot updates and don't add manifests from other instances
+  files = files.filter(
+    ({ name, path }) =>
+      !path.includes('hot-update') &&
+      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.
+      name: basePath ? basePath + file.name : file.name,
+      // Similar to basePath but only affects the value (e.g. how output.publicPath turns
+      // require('foo/bar') into '/public/foo/bar', see https://github.com/webpack/docs/wiki/configuration#outputpublicpath
+      path: publicPath ? publicPath + file.path : file.path
+    };
+
+    // Fixes #210
+    changes.name = removeKeyHash ? changes.name.replace(removeKeyHash, '') : changes.name;
+
+    return Object.assign(file, changes);
+  });
+
+  files = transformFiles(files, options);
+
+  let manifest = generateManifest(compilation, files, options);
+  const isLastEmit = emitCount === 0;
+
+  manifest = getCompilerHooks(compiler).beforeEmit.call(manifest);
+
+  if (isLastEmit) {
+    const output = options.serialize(manifest);
+    //
+    // Object.assign(compilation.assets, {
+    //   [manifestAssetId]: {
+    //     source() {
+    //       return output;
+    //     },
+    //     size() {
+    //       return output.length;
+    //     }
+    //   }
+    // });
+    //
+    compilation.emitAsset(manifestAssetId, new RawSource(output));
+
+    if (options.writeToFileEmit) {
+      mkdirSync(dirname(manifestFileName), { recursive: true });
+      writeFileSync(manifestFileName, output);
+    }
+  }
+
+  getCompilerHooks(compiler).afterEmit.call(manifest);
+};
+
+const normalModuleLoaderHook = ({ moduleAssets }, loaderContext, module) => {
+  const { emitFile } = loaderContext;
+
+  // eslint-disable-next-line no-param-reassign
+  loaderContext.emitFile = (file, content, sourceMap) => {
+    if (module.userRequest && !moduleAssets[file]) {
+      Object.assign(moduleAssets, { [file]: join(dirname(file), basename(module.userRequest)) });
+    }
+
+    return emitFile.call(module, file, content, sourceMap);
+  };
+};
+
+module.exports = { beforeRunHook, emitHook, getCompilerHooks, normalModuleLoaderHook };

lib/webpack-manifest-plugin/index.js

@@ -0,0 +1,73 @@
+const { relative, resolve } = require('path');
+
+const webpack = require('webpack');
+const NormalModule = require('webpack/lib/NormalModule');
+
+const { beforeRunHook, emitHook, getCompilerHooks, normalModuleLoaderHook } = require('./hooks');
+
+const emitCountMap = new Map();
+
+const defaults = {
+  basePath: '',
+  fileName: 'manifest.json',
+  filter: null,
+  generate: void 0,
+  map: null,
+  publicPath: null,
+  removeKeyHash: /([a-f0-9]{32}\.?)/gi,
+  // seed must be reset for each compilation. let the code initialize it to {}
+  seed: void 0,
+  serialize(manifest) {
+    return JSON.stringify(manifest, null, 2);
+  },
+  sort: null,
+  transformExtensions: /^(gz|map)$/i,
+  useEntryKeys: false,
+  writeToFileEmit: false
+};
+
+class WebpackManifestPlugin {
+  constructor(opts) {
+    this.options = Object.assign({}, defaults, opts);
+  }
+
+  apply(compiler) {
+    const moduleAssets = {};
+    const manifestFileName = resolve(compiler.options.output.path, this.options.fileName);
+    const manifestAssetId = relative(compiler.options.output.path, manifestFileName);
+    const beforeRun = beforeRunHook.bind(this, { emitCountMap, manifestFileName });
+    const emit = emitHook.bind(this, {
+      compiler,
+      emitCountMap,
+      manifestAssetId,
+      manifestFileName,
+      moduleAssets,
+      options: this.options
+    });
+    const normalModuleLoader = normalModuleLoaderHook.bind(this, { moduleAssets });
+    const hookOptions = {
+      name: 'WebpackManifestPlugin',
+      stage: Infinity
+    };
+
+    compiler.hooks.compilation.tap(hookOptions, (compilation) => {
+      const hook = !NormalModule.getCompilationHooks
+        ? compilation.hooks.normalModuleLoader
+        : NormalModule.getCompilationHooks(compilation).loader;
+      hook.tap(hookOptions, normalModuleLoader);
+    });
+
+    if (webpack.version.startsWith('4')) {
+      compiler.hooks.emit.tap(hookOptions, emit);
+    } else {
+      compiler.hooks.thisCompilation.tap(hookOptions, (compilation) => {
+        compilation.hooks.processAssets.tap(hookOptions, () => emit(compilation));
+      });
+    }
+
+    compiler.hooks.run.tap(hookOptions, beforeRun);
+    compiler.hooks.watchRun.tap(hookOptions, beforeRun);
+  }
+}
+
+module.exports = { getCompilerHooks, WebpackManifestPlugin };