Limited webpack chain support

[galvez]

In rewriting vue-element-admin to Nuxt, I came across this disparity:

Vue-CLI version:

    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

Nuxt version:

  build: {
    extend(config) {
      const svgIconPath = resolve(__dirname, 'src/icons')
      const index = config.module.rules
        .findIndex(rule => String(rule.test).includes('svg'))
      config.module.rules[index].exclude = [svgIconPath]
      config.module.rules.splice(index, 0, {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: [svgIconPath],
        options: {
          symbolId: 'icon-[name]'
        }
      })
    }
  }

I propose we either:

1) Pass a webpack-chain instance as config in extend() (breaking change)

or, to preserve backwards compatibility:

2) Introduce a second extend() parameter called chain, example:

build: {
  extend(config, chain) {
    // ...
  }
}

or

3) Introduce an extendChain() parameter:

build: {
  extendChain(config) {
    // ...
  }
}

[Atinux]

I makes sense to allow the usage of Webpack chain, I think using extendChain makes more sense actually to avoid breaking change or changing any methods signature.

[galvez]

Cool, I'll start working on a PR for further review -- should be pretty straightforward to implement.

[clarkdo]

webpack-chain does support converting webpack config object to chain object as https://github.com/neutrinojs/webpack-chain/issues/90 , so it may be more complex for Nuxt to migrate to webpack-chain.

[galvez]

@clarkdo yeah, I think I may have found a way thought. Will demonstrate in PR.

[pi0]

Using extend providers much more customization surface and i think is not a good practice to encourage users directly modify webpack config for each loader integration but using nuxt modules that extend config. Adding chain to core, either needs a breaking change to migrate to webpack chain or 2 extend functionalities and maintaining/supporting them.

PS: Your demo is not fair :D I'm not sure vue-cli snippet works as is for nuxt config.

PSS: If there is a workaround, we can first try with a nuxt module that adds chain support.

[clarkdo]

Another point is that webpack-chain needs time for supporting latest webpack.

For example, we already proposed pr for webpack 5 which may need time for webpack-chain to implement.

[galvez]

@pi0 yep, makes sense. I can demonstrate my approach with a module too :)

[Atinux]

Module sounds like a great approach actually :)

[Nicholaiii]

Any news on this? :)

[pi0]

Clarification: Nuxt3 rewrite for webpack config, is via preset/functions. So finally using a module to convert config into wp chain and back to object is preferred. We might add such utility to nuxt/kit...