Further information on duplicates

[rightaway]

It would be useful if there were a way to see where the duplicates files came from in the problems panel, or some notes in the output of how to address the issue. I see many entries like below but have no idea how to solve it and there's no further guidance. If I run webpack itself with --display-modules I don't see duplicate occurrences of MyComponent so I can't tell how to resolve this issue.

vue-loader/lib/index.js??vue-loader-options!/path/to/MyComponent.vue?vue&type=style&index=0&lang=css&

[ryan-roemer]

We're constrained in what information we can display UI-wise and not overwhelm the dashboard, real-estate-wise.

Fortunately, you can see a much more detailed information report using the CLI version of inspectpack (it's the underlying engine for webpack-dashboard. See usage at: https://github.com/FormidableLabs/inspectpack).

For example, for duplicates, you can do something like:

1. Create a stats file object with something like (after npm install --dev webpack-stats-plugin):

// webpack.config.js of your project:

const { StatsWriterPlugin } = require("webpack-stats-plugin");

module.exports = {
  // ...
  plugins: [
    new StatsWriterPlugin({
      fields: ["assets", "modules"]
    })
  ]
};

2. Run your normal webpack build command. This causes a stats JSON file of ${output.path}/stats.json to be written.

3. Then install + run inspectpack CLI (after npm install -g inspectpack):

$ inspectpack --action duplicates \
  --stats PATH/TO/stats.json \
  --format text

and you'll get a more in-depth report.

There are lots more options and such from the inspectpack CLI. If you've got an open source project, just point us to it and I can see if I can create a sample report for you.