-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Use WebpackMD5Hash and ChunkManifestPlugin? #210
Comments
Relevant webpack issue: Relevant Twitter threads on this implementation:
|
OK, this looks reasonable. Would you like to make a PR to get this in? |
I wasn't able to get long-term hashing working correctly w/out using The solution is to extract your webpack manifest and stick it in the HTML, which is what |
You could also stick the manifest in a separate JavaScript file. You could even then add a hash to the manifest as long as the manifest file itself doesn't get included in the manifest (creating your cycle). |
Yep, you can put it in a separate file. Putting it in the HTML just avoids the extra HTTP request. |
You could even concatenate it on the start of your existing JS file after the hash is generated (this may have to be done outside of webpack, I don't know much about webpack's features) |
Or we can take control of rendering the HTML. |
You can use inline-manifest-webpack-plugin to make an extracted manifest available to inline in a You can also write another plugin to automatically insert this into the HTML before Example in this issue: szrenwei/inline-manifest-webpack-plugin#5 Might just be easier to write your own plugin which does all of that in one place. |
Haha, I was just trying that. After completely reading through webpack/webpack#1315 I can certainly empathize with frustrations around JavaScript tooling. |
OK, now I have a JS object in my HTML. How am I supposed to use this correctly? I’m trying new webpack.optimize.CommonsChunkPlugin({
names: ['react', 'manifest']
}),
new WebpackMd5HashPlugin(),
new InlineManifestPlugin(),
function injectManifestIntoHTML() {
this.plugin('compilation', (compilation) => {
compilation.plugin('html-webpack-plugin-before-html-processing', (data, cb) => {
data.html = data.html.replace('</body>', data.assets.webpackManifest + '</body>');
cb()
})
})
},
new HtmlWebpackPlugin({
// ... right now. |
I lost 1.5 days last week ;) |
– @kentcdodds (src: https://twitter.com/kentcdodds/status/759078941206261761) Possibly helpful? |
Yeah, basically you take |
IIRC that sounds exactly like the kinda thing @gaearon struggled with? |
This requires |
If I've learned anything about webpack, the answer is always yes. It's just a matter of how :) I'm not certain I understand your hesitance to put it in the However, if someone else has a way to avoid adding it at all, that'd be pretty sweet. I imagine there's a way. |
I've got this down to 4 plugins, automatically injecting the manifest into the generated HTML: Plugins & reason for each one: https://github.com/insin/nwb/blob/next/src/createWebpackConfig.js#L366-L379 Custom plugin to inject the manifest and stop it from being emitted: https://github.com/insin/nwb/blob/545c9a2581ecce55ec6416af16d1154d86f48c7a/src/createWebpackConfig.js#L244-L272 |
If it’s there, somebody’s going to delete it by mistake. |
@insin Should |
Came across this on Medium and might be useful. |
|
AFAICT you're doing the exact same thing that I'm doing, Kent. Sticking the
|
BTW I wrote about my journey with long-term a long time ago and I've just updated it with mentions of MD5HashPlugin and https://github.com/szrenwei/inline-manifest-webpack-plugin |
Let's revisit this (or alternatives) now that we're on WP2? |
Let’s continue the discussion in #2328. |
https://github.com/mjackson/web-starter has some interesting config decisions:
WebpackMD5Hash
pluginChunkManifestPlugin
pluginI’d like to understand their point better and whether we should enable them as well.
Thoughts?
The text was updated successfully, but these errors were encountered: