0

So Webpack is for bundling stuff. It has a lot of use case it seems, but I'm new to it so I might be missing something or using it incorrectly.

Currently it's probably mostly used for bundling JS and CSS and perhaps handling images with the file-loader or url-loader.

It also seems to bundle and do its plugin stuff in a cascading way. Meaning that a import in import will get evaluated and so I see that a image which is stored in a CSS file thusly:

background-image: url(../images/banner.jpg);

will go through the loader that handles .jpg files and gets moved through to the dist folder as well as the CSS will have the relevant path updated according to this. I'm not sure what part of webpack manages that, is it the css-loader perhaps that ensures this?

The problem arises since I'm currently developing a WP theme which uses PHP templates. This I never pass through the Webpack pipeline. PHP loader seems to be about converting to HTML and that is no good.

So if I have a <img src="images/brand.jpg"> tag in the template I would have to manually import that image, and ensure that I have the right path to a currently non-existing bundle. I can also forget about inlining images using url-loader or svg-loader for example.

Is this just a ( currently ) non-existing use case for Webpack since most users are doing React or Vue projects with it.

Or am I missing something obvious?

Ingó Vals
  • 4,788
  • 14
  • 65
  • 113
  • So I've figured I could use html-loader, extract-loader, and file-loader if this was just basic HTML inside the php. Sadly the source is inside a PHP piece of code. Question if I need it or not since it is just `` and in theory Webpack should have the relativity figured out. – Ingó Vals Jun 06 '18 at 20:50

1 Answers1

1

If you still seek for an answer for that question - you can achieve that with Webpack manifest plugin (and [optionally] with Webpack copy plugin) and some php handler to parse the manifest.

I have a working version which you can see here https://github.com/LowGravityPL/RaccoonWP/tree/master/public/core/themes/raccoon-twig

Webpack code is in build-utils directory

Owi
  • 488
  • 2
  • 7