My use case is for server side rendering where I have two Webpack compilations.
One of them produces a client bundle with an
index.html file as an asset.
And I’d like to inject that as a module for the second compilation so that the server side files can do something like:
const generated_index_file = require('./index.html');
index.html has been injected from the other compile)
More information about my workflow:
webpack-dev-server for these two compilations. I have an
after-emit custom plugin on the server bundle compiler and in there I pull out the asset source of
compilation.assets and use
child_process.spawn to – kill the existing process and – spawn a fresh new node process and pipe the new
server.jsx into it.
So I need a way to hook into the first compile, to pull out the freshly built
index.html out of the first compile and to provide it to the second compile as a module.
In this way I can achieve a smooth development workflow using
webpack-dev-server with watch and auto-reload benefits.
I’m aware of virtual-module-webpack-plugin. But I don’t think it can get me there.
I’m aware of the
inputFileSystem but don’t know if that’s the right way to go about it.
I guess it’s possible to ask this question in a different way as well,
Given something like this:
const compiler = webpack([config1, config2]);
config2 require an asset from
Again as mentioned before the use case here is for server side rendering where a client-side bundle is generated and immediately after client-side bundle is generated you’d want to also generate a server-side bundle that is consistent with the client-side bundle.
In other words from your perspective as a developer ideally it should be a single compile since you never want client and server bundle to drift away from each other.
However this implies you somehow have to wait for the client bundle to finish, and then will have to consume the assets of the client bundle for spitting out the HTML file with appropriate script/style tags and sub-resource integrity hashes and so on.
This is not particularly difficult to do for a passive filesystem based build you can just script it step by step to achieve what you want however I’m interested in a smooth development experience that is hopefully fully compatible with
webpack-dev-server and is based on memory-filesystem.
In a dev environment you need to use hooks and you need to maintain a single node process that gets killed and re-created as the server bundle gets re-generated.