Improve usefulness of 'vue inspect' command /w chainWebpack

What problem does this feature solve?

Currently, the vue inspect command outputs a stringified version of the webpack config, and it’s is very useful to get an overview of the final config resulting from all the plugins you are using.

If you want to use configureWebpack() in vue.config.js to alter this config, this representation makes it easy to find the loader rule that you want to reach and change, for example.

But the chainWebpack config gives you a webpack-chain config, where all (most) pieces of the config have a name to access them by.

For example, if I wanted to change some options of the optimize-css-assets-webpack-plugin, I can to do this:

chainWebpack: config => {
  config
    .plugin('optimize-css')
      .tap(options => {
        options.setMyNewOption = true
        return options
      })
}

I like webpack-chain and think it’ a great way to manipulate webpack’s config, but for the above example, I must somehow be aware that the plugin’s name in webpack-chain is ‘optimize-css’.

So far, we haven’t documented this anywhere, and the output of vue inspect doesn’t help in that regard, either:

/* OptimizeCssAssetsPlugin */ {
      options: {
        safe: true,
        assetNameRegExp: /\.css$/g,
        cssProcessor: function () { /* omitted long function */ },
        cssProcessorOptions: {},
        canPrint: true
      },

So to learn that fact, I currently have to dig into the source of @vue/cli-service here, search through those files and then find this line:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/prod.js#L22

The other approach would be to do something like this as a sort of debugging:

chainWebpack(config => {
  console.log(Object.keys(config.plugins,entries))
})

…which would give me an array of all plugin names (I may have gotten the exact webpack.chain syntax wrong, but that should be possible generally), and I have to guess which one the right one is.

I don’t think that documenting it is enough, since documentation quickly can get out of sync, and there will also be numerous community-maintained plugins that don’t necessarily adhere to the documentation standards we can provide for the official plugins.

What does the proposed API look like?

The output of vue inspect should also include the name for each piece of config that has one.

      /* OptimizeCssAssetsPlugin (webpack-chain name: 'optimize-css' ) */ {
      options: {
        safe: true,
        assetNameRegExp: /\.css$/g,
        cssProcessor: function () { /* omitted long function */ },
        cssProcessorOptions: {},
        canPrint: true
      },

(note the addition to the comment in the first line)

This surely isn’t possible with the current implementation where we essentially pipe the already resolved webpack config through javascript -stringify (and replace plugin instances with the above json representation along the way).

Rather, we would have to somehow walk through the webpack-chain config and build the json representation from that.

I have no idea if this is possible, and won’t have time to play around with the idea in the next few weeks, but maybe someone else has a great idea about how to tackle this.

It would greatly improve usability of the chainWebpack API.

[eliperelman]

LGTM, although if you want to make sure you pick up the other options, you should merge/assign:

chainWebpack: config => {
  config
    .plugin('extract-css')
    .tap(([options, ...args]) => [
      Object.assign({}, options, { filename: 'Css/[name].css' }),
      ...args
    ]);
},

[eliperelman]

Note: we are probably going to implement something like this inside webpack-chain so it’s also usable in Neutrino: https://github.com/mozilla-neutrino/neutrino-dev/issues/328