Image Requires

[tomatau]

Nice work on this example, really interesting!

Experimenting locally and I can't find a solution for universal image requires using this setup.

I've worked with WebpackIsomorphicLoader to solve this problem but the css-modules-require-hook seems so elegant, is there an approach similar to this for getting generated image filenames from a require?

[glenjamin]

I've never used image loading via require myself - but hopefully someone else can chime in with an answer!

[adri]

https://github.com/petehunt/webpack-require looks interesting. If this works we could ditch the css-modules-require-hook. @tomatau What do you think?

[adri]

The css-modules-require-hook is nice but a bit limited to only providing css-modules. Would be nice to just reuse the same webpack config actually.

[glenjamin]

It's possible to build a webpack bundle for the server and require that, but it does take a bit longer to apply the change.

See webpack-contrib/webpack-hot-middleware#1 for an example

[tomatau]

@adri Personally I've been attempting to use import from or the standard require where possible and avoiding custom require functions.

https://github.com/halt-hammerzeit/webpack-isomorphic-tools has allowed me to do this quite comfortably although the module filter function for some assets can get a little messy. It supports one webpack config for both client and server compile and can be extended for more asset types.

[adri]

@tomatau Thanks! I integrated webpack-isomorphic-tools in the ultimate-hot-reloading-example and it works well for loading assets, also with css-modules. It also allows us to only use webpack for client and server rendering which is very neat.

There is only one issue left before I could make a pull request. When there was an error while parsing a file (for example a CSS file) the node process seems to not respond anymore. Not sure yet why. master...adri:webpack-isomorphic-tools

[adri]

Did anyone of you experience problems that the node process gets stuck after a syntax error in the parsed code using webpack? I'm not sure how to debug it.

PS: Got hot reloading working with external connections like databases. Thats another pull request.

[adri]

Found the issue. catamphetamine/webpack-isomorphic-tools#6

[tomatau]

nice work @adri 👍

[tomatau]

I've built a react & redux universal starter-kit/boilerplate heavily based on the examples of this repo along with universal image handling.

Check it out:
https://github.com/tomatau/breko-hub

Thanks again for this repo, it's been great to learn from whilst building that ^

[adri]

I'm experimenting now with running mocha tests after clearing the require caches, all in the same process.
Pretty sweet so far.

[tomatau]

@adri can you share? I'm looking to add test runners to breko-hub so would be interesting to look at your setup

[adri]

Yeah https://gist.github.com/adri/7d5127d03ce5ba3e7531#file-hotreload-js-L59
At the moment it is only one test, I'll add a glob soon – it's still 'in development'.

[kevinsimper]

There is a module like css-require 😄

https://www.npmjs.com/package/images-require-hook

[tomatau]

I've been using this https://github.com/tomatau/node-hook-filename

Works for any require type and allows you to specify how to deal with the file.

[kevinsimper]

@tomatau nice and do you have an example that would fit into this repo?

[tomatau]

I use it in my boilerplate when running tests

https://github.com/tomatau/breko-hub/blob/master/test/node-setup.js#L20

I use webpack-isomorphic-tools for images on the server render though