webpackwebpack-plugin

Webpack plugin for module friendly names (path instead of a number)

During the hot update in webpack development server in console I see these messages:

[HMR] Updated modules: 
[HMR]  - 1009 
[HMR]  - 1007

I would rather see the path names in there and I remember there was a plugin for that, but could not find it in Google.

Solution

  • UPDATED ANSWER:

    In webpack 4 it's just on by default when mode is set to development 

    module.exports = {
  mode: 'development',
}

    and can be controlled directly as well:

    module.exports = {
  //...
  optimization: {
    namedModules: true
  }
};

    ORIGINAL ANSWER: (for older webpack versions)

    I have found it myself, it's part of webpack itself it seems. here is how you add it:

    plugins: [
    new webpack.NamedModulesPlugin(),
    ...
]

    Now the module names in console and in the source will be like that:

    [HMR] Updated modules:
[HMR]  - ./../MyModule1.jsx
[HMR]  - ./../MyModule2.jsx