What HashedModuleIdsPlugin do?

Question

What does HashedModuleIdsPlugin do?

---

From Webpack docs:

This plugin will cause hashes to be based on the relative path of the module, generating a four character string as the module id. Suggested for use in production.

After reading it couple of times, I still can't understand why and when to use it and how it is related to the way I define a name to each bundle in output section:

filename: '[contenthash].[name].js',

Answer 1

I understand it this way, webpack 4.3 added contenthash, but before that, you can use HashedModuleIdsPlugin, I am not quite sure.

https://github.com/webpack/webpack/releases/tag/v4.3.0

Answer 2

By default, Webpack will create a list of modules (all the imported packages you have, as well as project files) and this list will be an array. The "module ID" (the pointer to the actual module code) will be the array index.

HashedModuleIdsPlugin will define this module list as an object, where the keys are the generated hash (from the relative file name) and the values will be the actual module code.

There is also the NamedModulesPlugin (if we're talking Webpack 3), which does the same thing but instead of a hash, the key is the actual relative path, for example:

    "./node_modules/tiny-relative-date/lib/factory.js": function(e, t, n) {

In Webpack 4+, this was replaced by: https://webpack.js.org/configuration/optimization/#optimizationmoduleids