webpack-md5-hash: Hash does not change when only imported modules IDs change
Webpack references modules with number IDs. Seems that when only module IDs change then bundle’s MD5 hash does not change. Look at example. Two builds of the same Webpack chunk. The only difference are IDs of imported modules. Despite this the hashes are same.
https://gist.github.com/Poky85/d8fe2d4711d532fbb3ea25a5efbbf992 https://gist.github.com/Poky85/e441799fdf314684d3eb41744a2ba4c6
Steps to reproduce:
- There are 2 Webpack chunks. For example vendor.js and app.js.
- You can achieve this with Webpack CommonsChunkPlugin (https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin)
- Modules imported in vendor.js are required in app.js
- App.js changes. As result of this module IDs in vendor.js will also change (IDs are determined by occurence count if you use OccurrenceOrderPlugin (https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin)
- But vendor.js chunk keeps the same hash.
webpack.config:
` var webpack = require(“webpack”); var WebpackMd5HashPlugin = require(‘webpack-md5-hash’); var config = {
entry: {
"bundle/app": ["./src/app.js"],
"bundle/vendor": ["./src/vendor.js"]
},
output: {
path: "./www/assets",
publicPath: "/assets/",
filename: "[name].[chunkhash].js",
chunkFilename: "[name].[chunkhash].js"
},
plugins: [
new WebpackMd5HashPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: "bundle/vendor"
})
],
bail: true
};
module.exports = config; `
About this issue
- Original URL
- State: open
- Created 8 years ago
- Reactions: 10
- Comments: 22
https://sebastianblade.com/using-webpack-to-achieve-long-term-cache/
To generate stable module ids For webpack 1.x version, we can use this plugin https://github.com/webpack/webpack/blob/master/lib/HashedModuleIdsPlugin.js which has included in webpack 2
@holyxiaoxin sadly that is not enough. When you change a file name you also need to change any reference to the file. The correct order to do this in to avoid wrong file caching is to traverse the dependency graph in a depth first post order traversal, where you move the file and update any reference to the file. This ensures that when a file changes its content, any file pointing to it will also be cache-busted with new content, because it contains the new name of the dependency
Any other consistent hashing algorithm is flawed, which is also why all other projects that try to solve this without employing a dependency graph have so many bugs, most of which they can’t fix because of their architecture
I have created simple demo to test different hashing algorithms. See https://github.com/webpack/webpack/issues/1856#issuecomment-260121296
Yep, @alexindigo seems to be working out well. Thanks for taking the time to publish on npm and answer my questions!
Cool, thanks. Let me know how it’s working out for you.