1

I am using React for a period of time and absolutely love the file watch functionality provided by webpack loaders. I have written some simple loaders for my needs also, but now I have a bit complex task to solve.

Well, there are some binary files in the project that I am loading into React using a custom webpack loader and also it generates some intermediate data (image preview) that I want to save to the file in order to use with 3rd-party tools (for example, image editor). I'd like to have this preview image regenerated each time when the source file(s) is changed - webpack loader can handle this with the file watch option, that is great!

But my question is: whether it is a correct task for webpack? Or maybe I should use another js-based tool? May I organize the webpack loading chain this way so files, generated by one loader and SAVED/UPDATED to disk will be immediately loaded by another webpack loader?

I can't found any examples for this in the NET so if you know how to do that please give me an idea.

Thanks!

P.S. So the react app should look like this

FILESET1 -> webpack-loader1 -> PREVIEW_IMAGE_TO_DISK -> result is accessible as js object in react

PREVIEW_IMAGE_FROM_DISK -> webpack-loader2 -> result accessible as js object in react

I know about webpack loader chaining ability, but it's all about js objects in memory. I need file processing because 'webpack-loader2' is working with files, not js objects.

pff.. Hope this is clear.

Epsiloncool
  • 1,435
  • 16
  • 39
  • You can use `sharp` for this, I kind of have a hacky way of doing this in this [boiler plate](https://github.com/samgermain/react-boiler-plate). Look at the files `package.json` `convert.js` `build_config/aliases.config.js` and `jsconfig.json` to see absolutely everything I do to convert images on `npm develop` (the last two just specify some aliases for the images folder). In doesn't convert when you start production mode though, just when you start develop – Sam Aug 03 '21 at 15:20
  • @Sam Hi, the image conversion is not a problem. Actually, I can create image by myscript, which is not simple conversion. Anyway. The main problem is to use Webpack to create intermediate files which I think is wrong (or not?) – Epsiloncool Aug 03 '21 at 15:51
  • You could try writing your own loader that uses `myscript` https://webpack.js.org/contribute/writing-a-loader/ – Sam Aug 03 '21 at 16:24
  • @Sam Yes, I think about this approach. Do you think it's a normal practice in React? Do you have any examples? – Epsiloncool Aug 03 '21 at 17:50
  • I don't, it's been something I've been wanting to do – Sam Aug 03 '21 at 18:12
  • Did you end up doing this? – Sam Aug 10 '21 at 00:53
  • @Sam I didn't finish yet, but I plan to develop the small server-side module either for webpack-dev-server or standalone (worst case) that will help my react application to modify server-side files. Since it's only for development mode, should be okay. The idea is to transform all source (binary) files to js objects with the help of custom webpack-loader, and then make resulting file generation in the React app. Then I will call my new API method to that small server module to save generated files. It should work well. – Epsiloncool Aug 10 '21 at 06:17

0 Answers0