FormidableLabs / webpack-dashboard

A CLI dashboard for webpack dev server

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to get more readable names of modules?

Igloczek opened this issue · comments

Is it possible to configure how the names of the modules are displayed?

This is how it looks like currently:
image

I'd expect to get for example v2/eobuwie-ui/molecules/header-cart-btn/HeaderCartBtn.vue instead of the full path including loaders, lang etc.

This is my modules setup

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test:  /\.svg$/,
        use: [
          'babel-loader',
          {
            loader: 'vue-svg-loader',
            options:  {
              svgo: {
                plugins: [
                  { removeDimensions: false },
                  { removeViewBox: false }
                ]
              }
            }
          }
        ]
      },
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: true, url: false } },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }

Apart of that I just have some simple plugins like MiniCssExtractPlugin and HtmlWebpackPlugin.

I'm using 3.2.0, Node 12.14.0, Hyper 3.0.2, Mac OS 10.15.4

What version of inspectpack do you have in node_modules? (It's a transitive dep of webpack-dashboard). It should be truncating the path names.

If you have a quick public repository that shows some offending paths, we can take a jump in and probably diagnose more quickly!

I'm using inspectpack in version 4.4.0.

I'll try to prepare some testing playground.