用于模块友好名称的 Webpack 插件（路径而不是数字）

Question

在控制台中的 webpack 开发服务器热更新期间，我看到这些消息：

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

我更想看到那里的路径名，我记得有一个插件，但在 Google 中找不到。

Answer 1

更新的答案：

在 webpack 4 中，当模式设置为 development

时，它只是默认打开

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

也可以直接控制：

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

原始答案：（对于较旧的 webpack 版本）

我自己找到的，它似乎是 webpack 本身的一部分。以下是添加方法：

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

现在控制台和源代码中的模块名称将如下所示：

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

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