Preserve subdirectories for images in webpack output

[drewrawitz]

I created a folder called svg inside of my images folder, but when webpack compiles it into the public folder, all of the images get flattened into that one images folder.

Is there something we can add to the webpack output object:

image: { filename: 'images/[name].[ext]' },

to be able to preserve those subdirectories?

Thanks!

[jedrzejchalubek]

Image moving is handled by a CopyPlugin. There is a flatten option which you need to turn off in here:

theme/build/webpack.config.js

Lines 97 to 104 in e96f13f

	new CopyPlugin([{
	from: {
	glob: `${config.paths.images}/**/*`,
	flatten: true,
	dot: false
	},
	to: config.outputs.image.filename,
	}]),

However, should Webpack pickup paths of these files and rewrite it accordingly in your CSS files. Is it somehow getting in the way?

[drewrawitz]

Hmm, It seems that even when I change that to flatten: false it still ends up flattening the images.

Yeah, so referencing the asset via CSS seems to be working just fine as it gets rewritten in the compiled code. So I can do this:

body {
  background-image: url('../images/svg/search.svg');
}

And it gets compiled to:

body {
  background-image: url(../images/search.svg);
}

which is the correct path in the public directory, so all is fine.

But if I wanted to reference the image on the PHP side, say something like this:

<?php echo asset_path('images/svg/search.svg'); ?>

that would return an error as the asset is not found. I would have to write it this way:

<?php echo asset_path('images/search.svg'); ?>

I think that might be a little confusing, so that's why I would prefer to keep the subdirectory consistent between the resources directory and the public directory.

[jedrzejchalubek]

Oh, you right. Same directory structure will be less confusing. Gonna take a look at this problem.

I don't test things out yet, so still guessing. Files are processed by file-loader and it has a placeholder [path], but it may introduce some problems with URLs rewriting by webpack.

[jedrzejchalubek]

My earlier guessing was wrong :)

CopyPlugin and file-loader for image rules need to have a correct context set up. Afterward we can normally use [path][name].[ext] pattern.

Should be resolved with 4ef8f82 commit