Webpacker fails to find image asset in a subdirectory

[mildred]

Using webpacker 6.0.0.pre.2 and webpack 5.26.1, rails view cannot find paths for image asset.

Here is the haml line that fails in my view:

= image_pack_tag('flags/fr.svg', class: 'flag rounded-circle me-1')

I'm getting the Webpacker::Manifest::MissingEntryError exception. The image is located in app/webpack/images/flags/fr.svg. The directory structure looks like:

app/webpack/
├── images
│   ├── favicon.ico
│   └── flags
│       ├── en.svg
│       ├── fr.svg
│       └── zh.svg
├── packs
│   ├── application.js
│   └── application.scss
├── src/...
└── stylesheets/...

webpacker.yml contains:

default: &default
  source_path: app/webpack
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  resolved_paths: ["app/webpack/images"]

It seems that the problem lies with the manifest generation. The asset path should be flags/fr.svg relative to app/webpack/images but the flags/ path prefix seems to be missing. The manifest contains:

{
  "application.css": "/packs/css/application.css",
  "application.js": "/packs/js/application-725aea22742bad3243cc.js",
  "css/application.css.map": "/packs/css/application.css.map",
  "entrypoints": {
    "application": {
      "assets": {
        "js": [
          "/packs/js/runtime-089dda7adff9a5688a94.js",
          "/packs/js/vendors-node_modules_hotwired_turbo-rails_app_javascript_turbo_index_js-node_modules_rails_ac-f25bc2-cef2fc19854103ad4fbc.js",
          "/packs/js/application-725aea22742bad3243cc.js"
        ],
        "css": [
          "/packs/css/application.css"
        ]
      }
    }
  },
  "js/application-725aea22742bad3243cc.js.map": "/packs/js/application-725aea22742bad3243cc.js.map",
  "js/runtime-089dda7adff9a5688a94.js.map": "/packs/js/runtime-089dda7adff9a5688a94.js.map",
  "js/vendors-node_modules_hotwired_turbo-rails_app_javascript_turbo_index_js-node_modules_rails_ac-f25bc2-cef2fc19854103ad4fbc.js": "/packs/js/vendors-node_modules_hotwired_turbo-rails_app_javascript_turbo_index_js-node_modules_rails_ac-f25bc2-cef2fc19854103ad4fbc.js",
  "js/vendors-node_modules_hotwired_turbo-rails_app_javascript_turbo_index_js-node_modules_rails_ac-f25bc2-cef2fc19854103ad4fbc.js.map": "/packs/js/vendors-node_modules_hotwired_turbo-rails_app_javascript_turbo_index_js-node_modules_rails_ac-f25bc2-cef2fc19854103ad4fbc.js.map",
  "js/vendors-node_modules_rails_actioncable_src_index_js-145d9f25b4424ce0cea9.chunk.js": "/packs/js/vendors-node_modules_rails_actioncable_src_index_js-145d9f25b4424ce0cea9.chunk.js",
  "js/vendors-node_modules_rails_actioncable_src_index_js-145d9f25b4424ce0cea9.chunk.js.map": "/packs/js/vendors-node_modules_rails_actioncable_src_index_js-145d9f25b4424ce0cea9.chunk.js.map",
  "media/images/en.svg": "/packs/media/images/601fdab623a59f2a2c9a.svg",
  "media/images/favicon.ico": "/packs/media/images/5c5c455f9d579ead5efe.ico",
  "media/images/fr.svg": "/packs/media/images/c88df3297cffe49852ae.svg",
  "media/images/zh.svg": "/packs/media/images/f5a6f048eb8367343bd4.svg",
  "runtime.js": "/packs/js/runtime-089dda7adff9a5688a94.js"
}

Perhaps this is a misconfiguration or a bug of webpack-assets-manifest in

webpacker/package/environments/base.js

Lines 57 to 63 in 45cc2a2

	new WebpackAssetsManifest({
	entrypoints: true,
	writeToDisk: true,
	output: 'manifest.json',
	entrypointsUseAssets: true,
	publicPath: true
	})

but I'm not sure

[taylorthurlow]

I'm having the same issue. Looks like this was an issue before, and it was fixed in #1964 (and #1973 I guess). The way the rules are set up seems to have significantly changed in 6.x for webpack 5 compatbility, so #2802 has I think "broken" these original fixes. I believe the change that causes this problem is here.

[mildred]

@taylorthurlow many thanks for the pointers. The changes you are indicating seems to have happened in webpacker v5, and v6 (with webpack 5 compatibility) has a completely different configuration.

The relevant configuration in v6 seems to be here:

webpacker/package/rules/file.js

Lines 20 to 22 in 45cc2a2

	generator: {
	filename: 'media/images/[hash][ext][query]'
	}

I'll try tweaking it to find what can work

edit: From webpack docs, it seems this customizes the generated output filename, which does not contain the path or file name, which is good. We just want te manifest to contain the file paths.

[mildred]

The issue seems to be with webpack-assets-manifests when it takes the basename of the file:

https://github.com/webdeveric/webpack-assets-manifest/blob/43e94b7e595e93853bf3b2a683593882fabbfb57/src/WebpackAssetsManifest.js#L533-L536

        const { sourceFilename } = asset.info;
        const name = sourceFilename ?
          ( contextRelativeKeys ? sourceFilename : path.basename( sourceFilename ) ) :
          asset.name;

Here, for me, sourceFilename is equal to app/webpack/images/flags/fr.svg in my setup. The problem will be to strip the app/webpack/images/ prefix to that path. Webpack does not keep the information of which directory it scanned to get the asset.

[mildred]

See probably related issue: webdeveric/webpack-assets-manifest#131

I have found out that my problem was related to switching to AssetModule from file-loader.

[mildred]

The issue seems to be with webpack-assets-manifests when it takes the basename of the file:

https://github.com/webdeveric/webpack-assets-manifest/blob/43e94b7e595e93853bf3b2a683593882fabbfb57/src/WebpackAssetsManifest.js#L533-L536

        const { sourceFilename } = asset.info;
        const name = sourceFilename ?
          ( contextRelativeKeys ? sourceFilename : path.basename( sourceFilename ) ) :
          asset.name;

Investigating, this code is not called. The condition if ( ! sourceFilenames.length ) earlier is not met and it's findAssetKeys() that yield a result. The value is generated earlier in handleProcessAssetsAnalyse() which is triggered by the Asset Modules.

handleProcessAssetsAnalyse() Takes the dirname of the generated location and the basename of the original file to construct the keys in the manifest. The solution is to keep the parent directories in the generated file paths.

In file.js tweaking the generated location with media/images/[path][hash][ext][query] work to some extent except the manifest keys will look like media/images/app/webpack/images/flags/fr.svg (but it should not contain the app/webpack/images part)

Perhaps nothing will need to be patched in webpack-assets-manifest after all...

[mildred]

discussed in webpack/webpack#12916

[schorsch]

I do have a similar problem with pre.2 and media files.
The fonts and static images via image_pack_path used to point to app/public/packs/media/images, app/public/packs/media/fonts but now the manifest.json contains those assets under a /static path where they are not found. Besides a precompile does not copy/create the files in their /public folders anymore.

As stated by @taylorthurlow above, the cause may be in the removal of some path definitions in the file-loader.

[louim]

We are also encountering the same problem.

Manifest v5

{
  "admin.js": "/packs/js/admin-5bf990637bd7544aaffd.js",
  "admin.js.map": "/packs/js/admin-5bf990637bd7544aaffd.js.map",
  "application.css": "/packs/css/application-3a99e58c.css",
  "application.css.map": "/packs/css/application-3a99e58c.css.map",
  "application.js": "/packs/js/application-7843b8850644864e3745.js",
  "application.js.map": "/packs/js/application-7843b8850644864e3745.js.map",
  "entrypoints": {
    "admin": {
      "js": [
        "/packs/js/admin-5bf990637bd7544aaffd.js"
      ],
      "js.map": [
        "/packs/js/admin-5bf990637bd7544aaffd.js.map"
      ]
    },
    "application": {
      "css": [
        "/packs/css/application-3a99e58c.css"
      ],
      "js": [
        "/packs/js/application-7843b8850644864e3745.js"
      ],
      "css.map": [
        "/packs/css/application-3a99e58c.css.map"
      ],
      "js.map": [
        "/packs/js/application-7843b8850644864e3745.js.map"
      ]
    }
  },
  "media/fonts/Apercu-Bold.ttf": "/packs/media/fonts/Apercu-Bold-523023ebf2e7dbb38ac28f7a06037c51.ttf",
  "media/fonts/Apercu-Bold.woff": "/packs/media/fonts/Apercu-Bold-402e8af5010d7e0e716a0b82d247ac58.woff",
  "media/fonts/Apercu-Light.ttf": "/packs/media/fonts/Apercu-Light-8185630ed8cb035542c0c9259222dff4.ttf",
  "media/fonts/Apercu-Light.woff": "/packs/media/fonts/Apercu-Light-ef4461d35ed2f5599193fd28ba84aa79.woff",
  "media/fonts/Apercu-Medium.ttf": "/packs/media/fonts/Apercu-Medium-18296ae459e639088b677e89183b92c0.ttf",
  "media/fonts/Apercu-Medium.woff": "/packs/media/fonts/Apercu-Medium-7bffae95231acf66484907a8eb6443eb.woff",
  "media/fonts/Apercu.ttf": "/packs/media/fonts/Apercu-7df1795d92dcb27ca61e1be0cb9eacfa.ttf",
  "media/fonts/Apercu.woff": "/packs/media/fonts/Apercu-3f6014034cfccd05238f0a3f7046a833.woff",
  "media/fonts/SuomiHandScript.ttf": "/packs/media/fonts/SuomiHandScript-92bcb0438c8cf336764b105f6a05675a.ttf",
  "media/fonts/SuomiHandScript.woff": "/packs/media/fonts/SuomiHandScript-d605539b8cd28bb6e69210e6df972062.woff",
  "media/images/apple-touch-icon.png": "/packs/media/images/apple-touch-icon-3bc0c950ce80b13088ca1b4c4e5fa454.png",
  "media/images/attestation-left-en.jpg": "/packs/media/images/attestation-left-en-c209f7bcae455a768aecf5a378f12158.jpg",
  "media/images/attestation-left-fr.jpg": "/packs/media/images/attestation-left-fr-6b2faa01e123c784dd3cd2108c9611d0.jpg",
  "media/images/attestation-right-business-en.png": "/packs/media/images/attestation-right-business-en-b00ffb5333178dfb87365240c1cc91a5.png",
  "media/images/attestation-right-business-fr.png": "/packs/media/images/attestation-right-business-fr-771f0dd688346116cc920fed2db72da9.png",
  "media/images/attestation-right-en.png": "/packs/media/images/attestation-right-en-c18b3ed51d3f0a5bd192875c69d30230.png",
  "media/images/attestation-right-fr.png": "/packs/media/images/attestation-right-fr-023cceede582b2cb65dbfc2605a8e814.png",
  "media/images/attestation.svg": "/packs/media/images/attestation-fdd9c20d919fd833b98a3222200a01e8.svg",
  "media/images/business-pricing-monthly-enrollments.svg": "/packs/media/images/business-pricing-monthly-enrollments-d76151ecff7f44b1bb8f2aefaceaa50e.svg",
  "media/images/business-pricing-monthly-users.svg": "/packs/media/images/business-pricing-monthly-users-6c8bab5c90590800a8fe457b59da9247.svg",
  "media/images/business-pricing-yearly-unlimited.svg": "/packs/media/images/business-pricing-yearly-unlimited-0e399988dc3ee8db6429963eb87f7c68.svg",
  "media/images/chat-en.svg": "/packs/media/images/chat-en-aac789c6b193102c8f92052e14c35a74.svg",
  "media/images/chat-fr.svg": "/packs/media/images/chat-fr-4f6298297815d7dac026127f0c408377.svg",
  "media/images/check.svg": "/packs/media/images/check-19e2c22342b7993f2ce49225a1424225.svg",
  "media/images/classroom-en.png": "/packs/media/images/classroom-en-84916f2174011963c3cc39f5be726011.png",
  "media/images/classroom-fr.png": "/packs/media/images/classroom-fr-c03a31928823e68421edca91464357bd.png",
  "media/images/clients/adisq.svg": "/packs/media/images/clients/adisq-867a2b6de553f689751866bc2a001cea.svg",
  "media/images/clients/boreale.svg": "/packs/media/images/clients/boreale-f235d0b9deffe10beff2ebdc18f590ef.svg",
  "media/images/clients/groupe-marcelle.svg": "/packs/media/images/clients/groupe-marcelle-c295b5527a44e20f09e67e837547a5e3.svg",
  "media/images/clients/la-ronde.png": "/packs/media/images/clients/la-ronde-8dde2d51cefd978f4fd737596e693b2a.png",
  "media/images/clients/master.svg": "/packs/media/images/clients/master-f5b143cd677e0bc45c72decc52804712.svg",
  "media/images/cohorts-en.png": "/packs/media/images/cohorts-en-33e7ea4beef6961d8401225710876e83.png",
  "media/images/cohorts-fr.png": "/packs/media/images/cohorts-fr-a0669ebf59e7621ce8deb822a0659845.png",
  "media/images/cool-guy.svg": "/packs/media/images/cool-guy-c1d4cddabf1d1cb917f0676b6bc4649e.svg",
  "media/images/course-type-en.png": "/packs/media/images/course-type-en-84916f2174011963c3cc39f5be726011.png",
  "media/images/course-type-fr.png": "/packs/media/images/course-type-fr-c03a31928823e68421edca91464357bd.png",
  "media/images/course_create.svg": "/packs/media/images/course_create-2cedc37a8058068a4fd96ad825d7b2fc.svg",
  "media/images/create-quiz-en.svg": "/packs/media/images/create-quiz-en-8e5b9b3e0c4783395c2dffe0685241bf.svg",
  "media/images/create-quiz-fr.svg": "/packs/media/images/create-quiz-fr-df1fa708cb13e4b7a17fc57ca51989ff.svg",
  "media/images/create-quiz.svg": "/packs/media/images/create-quiz-ee666e5b6218b4d9f9fb1f43f71b29a1.svg",
  "media/images/customize-1.png": "/packs/media/images/customize-1-d4b8bdb4ad6fa5e78fc6711bb6ed4146.png",
  "media/images/customize-2.png": "/packs/media/images/customize-2-b6e3cd570af4e296bca68e589b83fbc0.png",
  "media/images/customize-3.png": "/packs/media/images/customize-3-e7f8adfb8f39c2aa07b9fc87136ecb6a.png",
  "media/images/customize.svg": "/packs/media/images/customize-71a14d15b66776a3daec1ef3b9b34a17.svg",
  "media/images/dashboard-en.png": "/packs/media/images/dashboard-en-4c8be4157c69e200b2d27b29d4e9c8a1.png",
  "media/images/dashboard-en.svg": "/packs/media/images/dashboard-en-bdbc307da14cdab5b5a8a44cc81bdb4e.svg",
  "media/images/dashboard-fr.png": "/packs/media/images/dashboard-fr-33b289bd26df95dc5a879b7f41e7288a.png",
  "media/images/dashboard-fr.svg": "/packs/media/images/dashboard-fr-6b4abbb99ed14ba17f1d273e5c50f814.svg",
  "media/images/didacte_logo.png": "/packs/media/images/didacte_logo-b5b50a6456a47e352c6fb66379793a40.png",
  "media/images/didacte_logo.svg": "/packs/media/images/didacte_logo-d3e7f727bea860326616073d0d80648a.svg",
  "media/images/favicon.ico": "/packs/media/images/favicon-e2449abfe02f093d789984de4ed134da.ico",
  "media/images/favicon.svg": "/packs/media/images/favicon-7d933f796700b1326815a566966ba8da.svg",
  "media/images/featured-courses-en.svg": "/packs/media/images/featured-courses-en-0eaad2853c70677e45e92abc4df1b42a.svg",
  "media/images/featured-courses-fr.svg": "/packs/media/images/featured-courses-fr-36713d50d02fe7cd415e61a791d19324.svg",
  "media/images/industry/all-customer-success.svg": "/packs/media/images/industry/all-customer-success-bc5e5337c9a1ebf7a23ddfc7a85cf5cf.svg",
  "media/images/industry/all-franchise.svg": "/packs/media/images/industry/all-franchise-9c713c5fa8c19698f7f8d738f6937523.svg",
  "media/images/industry/all-index.svg": "/packs/media/images/industry/all-index-9ae1ca06c5320ac493091cc6ce66b46f.svg",
  "media/images/industry/all-information-technology.svg": "/packs/media/images/industry/all-information-technology-114c03782e9de23d7322ccc9319ffd87.svg",
  "media/images/industry/all-insurances-finances.svg": "/packs/media/images/industry/all-insurances-finances-8cb1acf5df4f7b04000184b9d33da56d.svg",
  "media/images/industry/all-professional-associations.svg": "/packs/media/images/industry/all-professional-associations-8cb1acf5df4f7b04000184b9d33da56d.svg",
  "media/images/industry/all-retail.svg": "/packs/media/images/industry/all-retail-aae1830608d524b6fb8582fea62bc5b2.svg",
  "media/images/industry/arm-left.svg": "/packs/media/images/industry/arm-left-2a7ef48e783d7020db1cd76a8f31e295.svg",
  "media/images/industry/arm-right.svg": "/packs/media/images/industry/arm-right-5274e702bb997a0190a1fd941eba7605.svg",
  "media/images/industry/binoculars.svg": "/packs/media/images/industry/binoculars-3511a153e00f16093d25fc897b8dde95.svg",
  "media/images/industry/clock.svg": "/packs/media/images/industry/clock-0e45d3797372200dbd485b356eedbf3d.svg",
  "media/images/industry/control-tower.svg": "/packs/media/images/industry/control-tower-a869a94d4835e567dd169e9d6960b386.svg",
  "media/images/industry/crane.svg": "/packs/media/images/industry/crane-4b73b76522d9498739dc7e84b87ee2c0.svg",
  "media/images/industry/devices.svg": "/packs/media/images/industry/devices-b9981f2782c02125ebb866d2c48c3d33.svg",
  "media/images/industry/diploma.svg": "/packs/media/images/industry/diploma-b456da20bf2bbad1fb6cffc3feed0d1d.svg",
  "media/images/industry/graphs.svg": "/packs/media/images/industry/graphs-73186dc90de0d37ea1924b8f0e63d3f8.svg",
  "media/images/industry/moneybag.svg": "/packs/media/images/industry/moneybag-4ed558b5b9937bb9445b508dcc38d694.svg",
  "media/images/industry/observatory.svg": "/packs/media/images/industry/observatory-394e64b363092eec85800c7229b15bcb.svg",
  "media/images/industry/shield.svg": "/packs/media/images/industry/shield-9f9395cb78550feb14c721f49446e3ba.svg",
  "media/images/industry/spoutnik.svg": "/packs/media/images/industry/spoutnik-4b010e238805c2c706c2ea3d6ddb8cd4.svg",
  "media/images/industry/stars.svg": "/packs/media/images/industry/stars-cefb800bdb18c6a8a870e0a01558de8c.svg",
  "media/images/industry/swissknife.svg": "/packs/media/images/industry/swissknife-a670ca3574ae5731ec9d660d365c4abe.svg",
  "media/images/industry/truck.svg": "/packs/media/images/industry/truck-1c0cb1283474ae1933de37136d0aecb4.svg",
  "media/images/inphone-facebook-en.svg": "/packs/media/images/inphone-facebook-en-196c25dffe5895719d8793986f9728a7.svg",
  "media/images/inphone-facebook-fr.svg": "/packs/media/images/inphone-facebook-fr-07c2c6e8588356b96f74fc6dfc61d5e8.svg",
  "media/images/intellectual-property.png": "/packs/media/images/intellectual-property-524e4f8f4f1a4938c91b55c0606c6d09.png",
  "media/images/laptop.png": "/packs/media/images/laptop-f923a9577547efab9cf43e7d2c15ac16.png",
  "media/images/left-circle.svg": "/packs/media/images/left-circle-13237847504d3014b227e58bf1399f3c.svg",
  "media/images/left-shapes.svg": "/packs/media/images/left-shapes-a39c04efcab45bf1597ab068a9184f04.svg",
  "media/images/lifestyle-didacte-pro.svg": "/packs/media/images/lifestyle-didacte-pro-2b049c9047d52007055578fe3bfb44d3.svg",
  "media/images/lifestyle-didacte.svg": "/packs/media/images/lifestyle-didacte-c5b215b7b92f8887ae1293a58951a6f6.svg",
  "media/images/live-business.jpg": "/packs/media/images/live-business-84d2751204e8db8fa3b273bfa87995f1.jpg",
  "media/images/live.jpg": "/packs/media/images/live-a6e3700168399f94c23656631d1d1856.jpg",
  "media/images/lock.svg": "/packs/media/images/lock-79175a565deb84a7b99b97fa5d7437c6.svg",
  "media/images/login-bridge-en.svg": "/packs/media/images/login-bridge-en-852691b55826107d8de820ad93d9896a.svg",
  "media/images/login-bridge-fr.svg": "/packs/media/images/login-bridge-fr-e31e5230a5698ee4037a33d7fd641b2b.svg",
  "media/images/map.svg": "/packs/media/images/map-59070d102e1b5d01bf4e92021c7411d7.svg",
  "media/images/mini-responsive.svg": "/packs/media/images/mini-responsive-560d9f8aa1861b3348f670bd08250b9e.svg",
  "media/images/mosaic.jpg": "/packs/media/images/mosaic-8d573671a77c5cec46cfe396ce1dc35c.jpg",
  "media/images/phone.svg": "/packs/media/images/phone-a074457512d86a8ec5ed41e7e4c22ab2.svg",
  "media/images/quiz.svg": "/packs/media/images/quiz-2ddd800f3d93d59759491c0cdc02294a.svg",
  "media/images/responsive.svg": "/packs/media/images/responsive-fed42d2e677694073c2cfd58b3e6ac40.svg",
  "media/images/right-circle.svg": "/packs/media/images/right-circle-aed52ee344e0d0895a5e5ab454b28b8f.svg",
  "media/images/right-shapes.svg": "/packs/media/images/right-shapes-12a0fd7e6fb2badf4bd5846a2b64ab59.svg",
  "media/images/roberta_mcmuffin.jpg": "/packs/media/images/roberta_mcmuffin-ee2c205de988c4dd0b36c145bddd1e76.jpg",
  "media/images/robot-didacte.svg": "/packs/media/images/robot-didacte-4857657fd5304c0ba8bccc190531374a.svg",
  "media/images/robot-pro.svg": "/packs/media/images/robot-pro-b66ffa0e2b23d3c46f99272c39b87902.svg",
  "media/images/roller.svg": "/packs/media/images/roller-c0f117ed9b61ae1e871ebdb79b7ff7d9.svg",
  "media/images/splash-business-en.svg": "/packs/media/images/splash-business-en-c372fb5d81abac72337ea663e4ed8680.svg",
  "media/images/splash-business-fr.svg": "/packs/media/images/splash-business-fr-19c7ca4fe5d156992bc53984e4951ecb.svg",
  "media/images/splash-home.png": "/packs/media/images/splash-home-e1b62dde907d9530d2e7dcaf58c56333.png",
  "media/images/splash-multi-feature-1.png": "/packs/media/images/splash-multi-feature-1-1c026a2818d02acabcd2ce8ad3ad9495.png",
  "media/images/splash-multi-feature-2.png": "/packs/media/images/splash-multi-feature-2-29cbf0289e648a39706b79ec257ebd15.png",
  "media/images/sprite.svg": "/packs/media/images/sprite-fb7395884723cbf31cef4435d34df8e8.svg",
  "media/images/stamp.svg": "/packs/media/images/stamp-cd27063006356038f559d11baef9962f.svg",
  "media/images/teachers-en.png": "/packs/media/images/teachers-en-95fedd8ca2ef2c9aada8432f4c0e70b0.png",
  "media/images/teachers-fr.png": "/packs/media/images/teachers-fr-850f20c6038a3e169e9c0fb3cb370edf.png",
  "media/images/team/avatar.png": "/packs/media/images/team/avatar-4e7bb6db32f9e4ec30b69baad30cd70e.png",
  "media/images/team/busu.jpg": "/packs/media/images/team/busu-ef1e840c491587b27645804359f1e5fb.jpg",
  "media/images/team/go.jpg": "/packs/media/images/team/go-0ada10f4df7acd9141f10b4ee4d4bfb1.jpg",
  "media/images/team/jp.jpg": "/packs/media/images/team/jp-ab4beff78e3acb8637379056d2547536.jpg",
  "media/images/team/jules.jpg": "/packs/media/images/team/jules-1f6526b8cef5a5fe89216f08905b9722.jpg",
  "media/images/team/leo.jpg": "/packs/media/images/team/leo-2f51fab86a3a51dbc6537da53af4b9f2.jpg",
  "media/images/team/loubz.jpg": "/packs/media/images/team/loubz-49b24ed93c1f4998202aa87d2b9bea20.jpg",
  "media/images/team/louim.jpg": "/packs/media/images/team/louim-613d8a7928673ab4e6dc4134abef1b8c.jpg",
  "media/images/team/lp.jpg": "/packs/media/images/team/lp-17c5dd4952288d9eab0c02bc9fafa95f.jpg",
  "media/images/team/mathieu.jpg": "/packs/media/images/team/mathieu-d7728560f78a2b00f5dc42a3b1fced39.jpg",
  "media/images/team/mh.jpg": "/packs/media/images/team/mh-564b0fe698fc2e6ad7a8aa3db7648f03.jpg",
  "media/images/testimonials/guylaine_otis.jpg": "/packs/media/images/testimonials/guylaine_otis-e82cf11e35a11f78becacd6d61f9234c.jpg",
  "media/images/testimonials/isabelle_wolfe.jpg": "/packs/media/images/testimonials/isabelle_wolfe-fd0a04dc6ff775fb4a290966db64f75b.jpg",
  "media/images/transactions-en.png": "/packs/media/images/transactions-en-03b1a39be0c9a8a7947485f0bac86fe8.png",
  "media/images/transactions-fr.png": "/packs/media/images/transactions-fr-eed559e320b9cc0f03b8926b06221137.png",
  "media/images/transactions-left-en.png": "/packs/media/images/transactions-left-en-256698fa872e9290fb8f90904c47cb2f.png",
  "media/images/transactions-left-fr.png": "/packs/media/images/transactions-left-fr-0154d908616a514aca4d34fde2a07153.png",
  "media/images/trix/h1.svg": "/packs/media/images/trix/h1-1b4635f82b547591274077bb02f204ef.svg",
  "media/images/trix/h2.svg": "/packs/media/images/trix/h2-e80556e0bb3a8c60554adec883131665.svg",
  "media/images/trix/h3.svg": "/packs/media/images/trix/h3-99048e79677d6ff5299c98456a9e4b05.svg",
  "media/images/unlimited.svg": "/packs/media/images/unlimited-d7db1353b09c4bf628d991096366e462.svg",
  "media/images/white-gloves-en.svg": "/packs/media/images/white-gloves-en-c8bddb367d7288a88d838493c0a9e63e.svg",
  "media/images/white-gloves-fr.svg": "/packs/media/images/white-gloves-fr-5de465186863d1ccb38fbe5617147e10.svg",
  "media/images/x.svg": "/packs/media/images/x-b1c40946c1337f219d40a7557f6e0e62.svg",
  "media/videos/create-business-en.mp4": "/packs/media/videos/create-business-en-59f858d4ebd5751d9b30158ce2879aaa.mp4",
  "media/videos/create-business-fr.mp4": "/packs/media/videos/create-business-fr-b6b6741bfbaf3509b648bb77a60608ef.mp4",
  "media/videos/create-en.mp4": "/packs/media/videos/create-en-db1452be23ed3075dd21d2924a440309.mp4",
  "media/videos/create-fr.mp4": "/packs/media/videos/create-fr-aa9f2fe2633804792bb98f8cb08de9c8.mp4",
  "media/videos/didacte-en.mp4": "/packs/media/videos/didacte-en-f74f31f67d85507d08a712052a6161e0.mp4",
  "media/videos/didacte-fr.mp4": "/packs/media/videos/didacte-fr-7574d62a8b16ae22534cbeb168ed00a8.mp4",
  "media/videos/home-en.mp4": "/packs/media/videos/home-en-70d54c14599a3e31f01683f074f9a0a2.mp4",
  "media/videos/home-fr.mp4": "/packs/media/videos/home-fr-05a7a7ef500afc0fa48766b247f89506.mp4"
}

Manifest v6

{
  "admin.js": "/packs/js/admin-0fc168e8ce8875bd8ac5.js",
  "application.css": "/packs/css/application.css",
  "application.js": "/packs/js/application-c79fbe95a15cbdf6cb81.js",
  "css/application.css.map": "/packs/css/application.css.map",
  "entrypoints": {
    "admin": {
      "assets": {
        "js": [
          "/packs/js/runtime-d034a7497fb2d914e085.js",
          "/packs/js/vendors-node_modules_rails_ujs_lib_assets_compiled_rails-ujs_js-node_modules_lazysizes_lazysizes_js-4eb1643f69cb7df70bee.js",
          "/packs/js/vendors-node_modules_rails_actiontext_app_javascript_actiontext_index_js-node_modules_trix_di-d7c943-4eabaef10a896f30890a.js",
          "/packs/js/admin-0fc168e8ce8875bd8ac5.js"
        ]
      }
    },
    "application": {
      "assets": {
        "js": [
          "/packs/js/runtime-d034a7497fb2d914e085.js",
          "/packs/js/vendors-node_modules_rails_ujs_lib_assets_compiled_rails-ujs_js-node_modules_lazysizes_lazysizes_js-4eb1643f69cb7df70bee.js",
          "/packs/js/vendors-node_modules_tippy_js_dist_tippy_css-node_modules_tippy_js_dist_tippy_esm_js-node_mod-c13995-02affabc360daf29d892.js",
          "/packs/js/application-c79fbe95a15cbdf6cb81.js"
        ],
        "css": [
          "/packs/css/application.css"
        ]
      }
    }
  },
  "js/admin-0fc168e8ce8875bd8ac5.js.map": "/packs/js/admin-0fc168e8ce8875bd8ac5.js.map",
  "js/application-c79fbe95a15cbdf6cb81.js.map": "/packs/js/application-c79fbe95a15cbdf6cb81.js.map",
  "js/runtime-d034a7497fb2d914e085.js.map": "/packs/js/runtime-d034a7497fb2d914e085.js.map",
  "js/vendors-node_modules_rails_actiontext_app_javascript_actiontext_index_js-node_modules_trix_di-d7c943-4eabaef10a896f30890a.js": "/packs/js/vendors-node_modules_rails_actiontext_app_javascript_actiontext_index_js-node_modules_trix_di-d7c943-4eabaef10a896f30890a.js",
  "js/vendors-node_modules_rails_actiontext_app_javascript_actiontext_index_js-node_modules_trix_di-d7c943-4eabaef10a896f30890a.js.map": "/packs/js/vendors-node_modules_rails_actiontext_app_javascript_actiontext_index_js-node_modules_trix_di-d7c943-4eabaef10a896f30890a.js.map",
  "js/vendors-node_modules_rails_ujs_lib_assets_compiled_rails-ujs_js-node_modules_lazysizes_lazysizes_js-4eb1643f69cb7df70bee.js": "/packs/js/vendors-node_modules_rails_ujs_lib_assets_compiled_rails-ujs_js-node_modules_lazysizes_lazysizes_js-4eb1643f69cb7df70bee.js",
  "js/vendors-node_modules_rails_ujs_lib_assets_compiled_rails-ujs_js-node_modules_lazysizes_lazysizes_js-4eb1643f69cb7df70bee.js.map": "/packs/js/vendors-node_modules_rails_ujs_lib_assets_compiled_rails-ujs_js-node_modules_lazysizes_lazysizes_js-4eb1643f69cb7df70bee.js.map",
  "js/vendors-node_modules_tippy_js_dist_tippy_css-node_modules_tippy_js_dist_tippy_esm_js-node_mod-c13995-02affabc360daf29d892.js": "/packs/js/vendors-node_modules_tippy_js_dist_tippy_css-node_modules_tippy_js_dist_tippy_esm_js-node_mod-c13995-02affabc360daf29d892.js",
  "js/vendors-node_modules_tippy_js_dist_tippy_css-node_modules_tippy_js_dist_tippy_esm_js-node_mod-c13995-02affabc360daf29d892.js.map": "/packs/js/vendors-node_modules_tippy_js_dist_tippy_css-node_modules_tippy_js_dist_tippy_esm_js-node_mod-c13995-02affabc360daf29d892.js.map",
  "media/images/Apercu-Bold.ttf": "/packs/media/images/523023ebf2e7dbb38ac2.ttf",
  "media/images/Apercu-Bold.woff": "/packs/media/images/402e8af5010d7e0e716a.woff",
  "media/images/Apercu-Light.ttf": "/packs/media/images/8185630ed8cb035542c0.ttf",
  "media/images/Apercu-Light.woff": "/packs/media/images/ef4461d35ed2f5599193.woff",
  "media/images/Apercu-Medium.ttf": "/packs/media/images/18296ae459e639088b67.ttf",
  "media/images/Apercu-Medium.woff": "/packs/media/images/7bffae95231acf664849.woff",
  "media/images/Apercu.ttf": "/packs/media/images/7df1795d92dcb27ca61e.ttf",
  "media/images/Apercu.woff": "/packs/media/images/3f6014034cfccd05238f.woff",
  "media/images/SuomiHandScript.ttf": "/packs/media/images/92bcb0438c8cf336764b.ttf",
  "media/images/SuomiHandScript.woff": "/packs/media/images/d605539b8cd28bb6e692.woff",
  "media/images/adisq.svg": "/packs/media/images/867a2b6de553f6897518.svg",
  "media/images/all-customer-success.svg": "/packs/media/images/bc5e5337c9a1ebf7a23d.svg",
  "media/images/all-franchise.svg": "/packs/media/images/9c713c5fa8c19698f7f8.svg",
  "media/images/all-index.svg": "/packs/media/images/9ae1ca06c5320ac49309.svg",
  "media/images/all-information-technology.svg": "/packs/media/images/114c03782e9de23d7322.svg",
  "media/images/all-professional-associations.svg": "/packs/media/images/8cb1acf5df4f7b040001.svg",
  "media/images/all-retail.svg": "/packs/media/images/aae1830608d524b6fb85.svg",
  "media/images/apple-touch-icon.png": "/packs/media/images/3bc0c950ce80b13088ca.png",
  "media/images/arm-left.svg": "/packs/media/images/2a7ef48e783d7020db1c.svg",
  "media/images/arm-right.svg": "/packs/media/images/5274e702bb997a0190a1.svg",
  "media/images/attestation-left-en.jpg": "/packs/media/images/c209f7bcae455a768aec.jpg",
  "media/images/attestation-left-fr.jpg": "/packs/media/images/6b2faa01e123c784dd3c.jpg",
  "media/images/attestation-right-business-en.png": "/packs/media/images/b00ffb5333178dfb8736.png",
  "media/images/attestation-right-business-fr.png": "/packs/media/images/771f0dd688346116cc92.png",
  "media/images/attestation-right-en.png": "/packs/media/images/c18b3ed51d3f0a5bd192.png",
  "media/images/attestation-right-fr.png": "/packs/media/images/023cceede582b2cb65db.png",
  "media/images/attestation.svg": "/packs/media/images/fdd9c20d919fd833b98a.svg",
  "media/images/avatar.png": "/packs/media/images/4e7bb6db32f9e4ec30b6.png",
  "media/images/binoculars.svg": "/packs/media/images/3511a153e00f16093d25.svg",
  "media/images/boreale.svg": "/packs/media/images/f235d0b9deffe10beff2.svg",
  "media/images/business-pricing-monthly-enrollments.svg": "/packs/media/images/d76151ecff7f44b1bb8f.svg",
  "media/images/business-pricing-monthly-users.svg": "/packs/media/images/6c8bab5c90590800a8fe.svg",
  "media/images/business-pricing-yearly-unlimited.svg": "/packs/media/images/0e399988dc3ee8db6429.svg",
  "media/images/busu.jpg": "/packs/media/images/ef1e840c491587b27645.jpg",
  "media/images/chat-en.svg": "/packs/media/images/aac789c6b193102c8f92.svg",
  "media/images/chat-fr.svg": "/packs/media/images/4f6298297815d7dac026.svg",
  "media/images/check.svg": "/packs/media/images/19e2c22342b7993f2ce4.svg",
  "media/images/clock.svg": "/packs/media/images/0e45d3797372200dbd48.svg",
  "media/images/cohorts-en.png": "/packs/media/images/33e7ea4beef6961d8401.png",
  "media/images/cohorts-fr.png": "/packs/media/images/a0669ebf59e7621ce8de.png",
  "media/images/control-tower.svg": "/packs/media/images/a869a94d4835e567dd16.svg",
  "media/images/cool-guy.svg": "/packs/media/images/c1d4cddabf1d1cb917f0.svg",
  "media/images/course-type-en.png": "/packs/media/images/84916f2174011963c3cc.png",
  "media/images/course-type-fr.png": "/packs/media/images/c03a31928823e68421ed.png",
  "media/images/course_create.svg": "/packs/media/images/2cedc37a8058068a4fd9.svg",
  "media/images/crane.svg": "/packs/media/images/4b73b76522d9498739dc.svg",
  "media/images/create-quiz-en.svg": "/packs/media/images/8e5b9b3e0c4783395c2d.svg",
  "media/images/create-quiz-fr.svg": "/packs/media/images/df1fa708cb13e4b7a17f.svg",
  "media/images/create-quiz.svg": "/packs/media/images/ee666e5b6218b4d9f9fb.svg",
  "media/images/customize-1.png": "/packs/media/images/d4b8bdb4ad6fa5e78fc6.png",
  "media/images/customize-2.png": "/packs/media/images/b6e3cd570af4e296bca6.png",
  "media/images/customize-3.png": "/packs/media/images/e7f8adfb8f39c2aa07b9.png",
  "media/images/customize.svg": "/packs/media/images/71a14d15b66776a3daec.svg",
  "media/images/dashboard-en.png": "/packs/media/images/4c8be4157c69e200b2d2.png",
  "media/images/dashboard-en.svg": "/packs/media/images/bdbc307da14cdab5b5a8.svg",
  "media/images/dashboard-fr.png": "/packs/media/images/33b289bd26df95dc5a87.png",
  "media/images/dashboard-fr.svg": "/packs/media/images/6b4abbb99ed14ba17f1d.svg",
  "media/images/devices.svg": "/packs/media/images/b9981f2782c02125ebb8.svg",
  "media/images/didacte_logo.png": "/packs/media/images/b5b50a6456a47e352c6f.png",
  "media/images/didacte_logo.svg": "/packs/media/images/d3e7f727bea860326616.svg",
  "media/images/diploma.svg": "/packs/media/images/b456da20bf2bbad1fb6c.svg",
  "media/images/favicon.ico": "/packs/media/images/e2449abfe02f093d7899.ico",
  "media/images/favicon.svg": "/packs/media/images/7d933f796700b1326815.svg",
  "media/images/featured-courses-en.svg": "/packs/media/images/0eaad2853c70677e45e9.svg",
  "media/images/featured-courses-fr.svg": "/packs/media/images/36713d50d02fe7cd415e.svg",
  "media/images/go.jpg": "/packs/media/images/0ada10f4df7acd9141f1.jpg",
  "media/images/graphs.svg": "/packs/media/images/73186dc90de0d37ea192.svg",
  "media/images/groupe-marcelle.svg": "/packs/media/images/c295b5527a44e20f09e6.svg",
  "media/images/guylaine_otis.jpg": "/packs/media/images/e82cf11e35a11f78beca.jpg",
  "media/images/h1.svg": "/packs/media/images/1b4635f82b5475912740.svg",
  "media/images/h2.svg": "/packs/media/images/e80556e0bb3a8c60554a.svg",
  "media/images/h3.svg": "/packs/media/images/99048e79677d6ff5299c.svg",
  "media/images/inphone-facebook-en.svg": "/packs/media/images/196c25dffe5895719d87.svg",
  "media/images/inphone-facebook-fr.svg": "/packs/media/images/07c2c6e8588356b96f74.svg",
  "media/images/intellectual-property.png": "/packs/media/images/524e4f8f4f1a4938c91b.png",
  "media/images/isabelle_wolfe.jpg": "/packs/media/images/fd0a04dc6ff775fb4a29.jpg",
  "media/images/jp.jpg": "/packs/media/images/ab4beff78e3acb863737.jpg",
  "media/images/jules.jpg": "/packs/media/images/1f6526b8cef5a5fe8921.jpg",
  "media/images/la-ronde.png": "/packs/media/images/8dde2d51cefd978f4fd7.png",
  "media/images/laptop.png": "/packs/media/images/f923a9577547efab9cf4.png",
  "media/images/left-circle.svg": "/packs/media/images/13237847504d3014b227.svg",
  "media/images/left-shapes.svg": "/packs/media/images/a39c04efcab45bf1597a.svg",
  "media/images/leo.jpg": "/packs/media/images/2f51fab86a3a51dbc653.jpg",
  "media/images/lifestyle-didacte-pro.svg": "/packs/media/images/2b049c9047d520070555.svg",
  "media/images/lifestyle-didacte.svg": "/packs/media/images/c5b215b7b92f8887ae12.svg",
  "media/images/live-business.jpg": "/packs/media/images/84d2751204e8db8fa3b2.jpg",
  "media/images/live.jpg": "/packs/media/images/a6e3700168399f94c236.jpg",
  "media/images/lock.svg": "/packs/media/images/79175a565deb84a7b99b.svg",
  "media/images/login-bridge-en.svg": "/packs/media/images/852691b55826107d8de8.svg",
  "media/images/login-bridge-fr.svg": "/packs/media/images/e31e5230a5698ee4037a.svg",
  "media/images/loubz.jpg": "/packs/media/images/49b24ed93c1f4998202a.jpg",
  "media/images/louim.jpg": "/packs/media/images/613d8a7928673ab4e6dc.jpg",
  "media/images/lp.jpg": "/packs/media/images/17c5dd4952288d9eab0c.jpg",
  "media/images/map.svg": "/packs/media/images/59070d102e1b5d01bf4e.svg",
  "media/images/master.svg": "/packs/media/images/f5b143cd677e0bc45c72.svg",
  "media/images/mathieu.jpg": "/packs/media/images/d7728560f78a2b00f5dc.jpg",
  "media/images/mh.jpg": "/packs/media/images/564b0fe698fc2e6ad7a8.jpg",
  "media/images/mini-responsive.svg": "/packs/media/images/560d9f8aa1861b3348f6.svg",
  "media/images/moneybag.svg": "/packs/media/images/4ed558b5b9937bb9445b.svg",
  "media/images/mosaic.jpg": "/packs/media/images/8d573671a77c5cec46cf.jpg",
  "media/images/observatory.svg": "/packs/media/images/394e64b363092eec8580.svg",
  "media/images/phone.svg": "/packs/media/images/a074457512d86a8ec5ed.svg",
  "media/images/quiz.svg": "/packs/media/images/2ddd800f3d93d5975949.svg",
  "media/images/responsive.svg": "/packs/media/images/fed42d2e677694073c2c.svg",
  "media/images/right-circle.svg": "/packs/media/images/aed52ee344e0d0895a5e.svg",
  "media/images/right-shapes.svg": "/packs/media/images/12a0fd7e6fb2badf4bd5.svg",
  "media/images/roberta_mcmuffin.jpg": "/packs/media/images/ee2c205de988c4dd0b36.jpg",
  "media/images/robot-didacte.svg": "/packs/media/images/4857657fd5304c0ba8bc.svg",
  "media/images/robot-pro.svg": "/packs/media/images/b66ffa0e2b23d3c46f99.svg",
  "media/images/roller.svg": "/packs/media/images/c0f117ed9b61ae1e871e.svg",
  "media/images/shield.svg": "/packs/media/images/9f9395cb78550feb14c7.svg",
  "media/images/splash-business-en.svg": "/packs/media/images/c372fb5d81abac72337e.svg",
  "media/images/splash-business-fr.svg": "/packs/media/images/19c7ca4fe5d156992bc5.svg",
  "media/images/splash-home.png": "/packs/media/images/e1b62dde907d9530d2e7.png",
  "media/images/splash-multi-feature-1.png": "/packs/media/images/1c026a2818d02acabcd2.png",
  "media/images/splash-multi-feature-2.png": "/packs/media/images/29cbf0289e648a39706b.png",
  "media/images/spoutnik.svg": "/packs/media/images/4b010e238805c2c706c2.svg",
  "media/images/sprite.svg": "/packs/media/images/fb7395884723cbf31cef.svg",
  "media/images/stamp.svg": "/packs/media/images/cd27063006356038f559.svg",
  "media/images/stars.svg": "/packs/media/images/cefb800bdb18c6a8a870.svg",
  "media/images/swissknife.svg": "/packs/media/images/a670ca3574ae5731ec9d.svg",
  "media/images/teachers-en.png": "/packs/media/images/95fedd8ca2ef2c9aada8.png",
  "media/images/teachers-fr.png": "/packs/media/images/850f20c6038a3e169e9c.png",
  "media/images/transactions-en.png": "/packs/media/images/03b1a39be0c9a8a79474.png",
  "media/images/transactions-fr.png": "/packs/media/images/eed559e320b9cc0f03b8.png",
  "media/images/transactions-left-en.png": "/packs/media/images/256698fa872e9290fb8f.png",
  "media/images/transactions-left-fr.png": "/packs/media/images/0154d908616a514aca4d.png",
  "media/images/truck.svg": "/packs/media/images/1c0cb1283474ae1933de.svg",
  "media/images/unlimited.svg": "/packs/media/images/d7db1353b09c4bf628d9.svg",
  "media/images/white-gloves-en.svg": "/packs/media/images/c8bddb367d7288a88d83.svg",
  "media/images/white-gloves-fr.svg": "/packs/media/images/5de465186863d1ccb38f.svg",
  "media/images/x.svg": "/packs/media/images/b1c40946c1337f219d40.svg",
  "media/videos/create-business-en.mp4": "/packs/media/videos/59f858d4ebd5751d9b30.mp4",
  "media/videos/create-business-fr.mp4": "/packs/media/videos/b6b6741bfbaf3509b648.mp4",
  "media/videos/create-en.mp4": "/packs/media/videos/db1452be23ed3075dd21.mp4",
  "media/videos/create-fr.mp4": "/packs/media/videos/aa9f2fe2633804792bb9.mp4",
  "media/videos/didacte-en.mp4": "/packs/media/videos/f74f31f67d85507d08a7.mp4",
  "media/videos/didacte-fr.mp4": "/packs/media/videos/7574d62a8b16ae22534c.mp4",
  "media/videos/home-en.mp4": "/packs/media/videos/70d54c14599a3e31f016.mp4",
  "media/videos/home-fr.mp4": "/packs/media/videos/05a7a7ef500afc0fa487.mp4",
  "runtime.js": "/packs/js/runtime-d034a7497fb2d914e085.js"
}

It seems like:

• folders are missing
• original assets file name are missing (only seems to keep the hash now)
• all assets are defaulted to the media/images even if we could have media/fonts or other folders before. (in my v6 example videos are only working because I'm using a custom loader).

[sovapatr]

I'm not much of a javascript programmer so there is probably a better way to do this, but this is my current work around in case it helps anyone. Basically just restoring the file-loader rule to that of version 5.2.1.

//config/webpack/base.js

const { webpackConfig, rules } = require('@rails/webpacker')

const fileIndex = rules.findIndex(r => r.type === 'asset/resource')
if (fileIndex !== -1) {
  rules[fileIndex] = {
    test: [
      /\.bmp$/,
      /\.gif$/,
      /\.jpe?g$/,
      /\.png$/,
      /\.tiff$/,
      /\.ico$/,
      /\.avif$/,
      /\.webp$/,
      /\.eot$/,
      /\.otf$/,
      /\.ttf$/,
      /\.woff$/,
      /\.woff2$/,
      /\.svg$/
    ],
    exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
    use: [
      {
        loader: 'file-loader',
        options: {
          name(file) {
            if (file.includes('app/packs')) {
              return 'media/[path][name]-[hash].[ext]'
            }
            return 'media/[folder]/[name]-[hash:8].[ext]'
          },
          context: 'app/packs'
        },
      },
    ],
  }
}
module.exports = webpackConfig

[kb-ally]

Any solutions worked facing same with webpacker 5.2.1 version

[louim]

@kb-ally you shouldn't be experiencing this problem with webpacker 5.2.x. This problem is related to a config change for webpacker 6.

[kb-ally]

We have an png placed in app/assets/images/icons/xxx/yyy/zzz.png then in manifest it looks like "media/yyy/zzz.png": "/packs/media/yyy/zzz-35038b35.png",

and we need to reference it like image_pack_tag("media/yyy/zzz.png") instead of image_pack_tag("media/images/icons/xxx/yyy/zzz.png")

Is above expected ?

I was looking for full path with /images/icons/xxx

we are moving from sprockets to webpacker

[BuonOmo]

We are trying to update webpacker, and are encountering the same issue. Any news on that topic?

I've tried using @sovapatr's solution, however, it can only work for a depth of 1.

[oolzpishere]

I follow @sovapatr's solution , use at webpacker 6.0.0.beta.7, need two more step to work:

1. yarn add file-loader
2. add one line require.context('../images', true) to your entrypoint file app/packs/entrypoints/application.js

[rromanchuk]

Just a heads up for anyone in the future reading this. This issue may hit you and may not even be obvious, i had a situation where some assets would start to fail, somewhat randomly, and only on production. When inspecting the manifest, the failing file is mysteriously be missing, while every other asset around it being included just fine.

I had the same image, with different filenames, both being called in a view. This basically creates a near impossible-to-debug race condition where the first to be hashed is the key (filename) ends up in the manifest, when subsequent is dropped because same exact hash.