[Webpack 5] Using relative paths for assets (asset path relative to module path)

[mildred]

I have a Rails 6 application using webpack (through webpacker) and I moved to webpack 5. I have issues around generating the correct file path for the image assets.

It's investigated in rails/webpacker#2956

The webpack configuration uses the webpack-assets-manifest plugin to generate a manifest file with the proper filenames so the Rails template are finding the proper generated asset file. The manifest files maps the source file to the destination file.

My app file structure as as below:

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

I have a file at app/webpack/images/flags/en.svg that I would like to generate in public/packs/media/images/flags/601fdab623a59f2a2c9a.svg. The flags/ directory is especially important for me because the webpack-assets-manifest plugin uses the asset generated path to determine which relative source path to use. The actual source path is lost because paths are relative to application root directory and not to app/webpack/images/.

My webpack configuration contains:

{
  "output": {
    "filename": "js/[name]-[contenthash].js",
    "chunkFilename": "js/[name]-[contenthash].chunk.js",
    "hotUpdateChunkFilename": "js/[id]-[hash].hot-update.js",
    "path": "/absolute/path/to/public/packs",
    "publicPath": "/packs/"
  },
  "entry": {
    "application": [
      "/absolute/path/to/app/webpack/packs/application.js",
      "/absolute/path/to/app/webpack/packs/application.scss"
    ]
  },
  resolve: {
    modules: [
      "/absolute/path/to/app/webpack",
      "/absolute/path/to/app/webpack/images",
      "node_modules"
    ],
    ...
  },
  module: {
    rules: [
      {
        test: [
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/,
          /\.tiff$/,
          /\.ico$/,
          /\.avif$/,
          /\.webp$/,
          /\.eot$/,
          /\.otf$/,
          /\.ttf$/,
          /\.woff$/,
          /\.woff2$/,
          /\.svg$/
        ],
        exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
        type: 'asset/resource',
        generator: {
          filename: 'media/images/[path][hash][ext][query]'
        }
      },
      ...
    ]
  },
  ...
}

With this, my en.svg flag is generated at /packs/media/images/app/webpack/images/flags/601fdab623a59f2a2c9a.svg.

How to make the [path] substitution in the generator.filename rule configuration equal to flags/ (and not app/webpack/images/flags/ as currently)?

Thank you

[alexander-akait]

publicPath: 'auto', otherwise it is unsafe

[mildred]

Do you have any reference why it is unsafe? /packs/ is the Rails default, and the webpack documentation tells nothing about it being unsafe.

[mildred]

My solution for now is to modify my rails template and replace image_pack_tag("logo.svg") with image_pack_tag("app/webpack/image/logo.svg") although I'd like to get rid of the unnecessary prefix.

[alexander-akait]

You can have multiple logo.svg in different places, so image_pack_tag("logo.svg") and image_pack_tag("app/webpack/image/logo.svg") are different things and you can't omit part of paths

[mildred]

All my images are located in app/webpack/images so I'd like to be able to specify image_pack_tag("logo.svg") and image_pack_tag("foo/logo.svg") that would respectively reference app/webpack/images/logo.svg and app/webpack/images/foo/logo.svg

I need the path to be relative to the resolve module path, or some other path I could specify in configuration.

[alexander-akait]

Some plugins can emit assets in other locations so image_pack_tag("logo.svg") and image_pack_tag("app/webpack/image/logo.svg") are different things, as I say above

[sled]

Here's my solution with webpack's built in asset handling: rails/webpacker#2956 (comment)