feat: expose webpack config

[pi0]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

🐑ing a long-time wanted feature!

nuxt webpack [query...]

Options:

• --name: Bundle name to inspect. (client, server, modern)
• --dev: Inspect webpack config for dev mode
• --depth: Inspection depth. Defaults to 2 to prevent verbose output.
• --no-colors: Disable ANSI colors (disabled by default when TTY is not available or when piping to a file)

Inspired by vue inspect a convenient way to quickly inspect webpack configuration. Some examples:

• nuxt webpack
• nuxt webpack devtool
• nuxt webpack resolve alias
• nuxt webpack module rules
• nuxt webpack module rules test=.jsx
• nuxt webpack module rules test=.pug oneOf use.0=raw
• nuxt webpack plugins constructor.name=WebpackBar options reporter
• nuxt webpack module rules loader=vue-
• nuxt webpack module rules "loader=.*-loader"

DX: Tip to inspect more in-depth and auto-fallback to the upper-level match:

Why not nuxt inspect?

• Reserve namespace for future improvements like inspecting more internals other than webpack
• Ensure we can easily keep backward compatibility for cli while adding new possibilities

node_modules/nuxt/webpack.config.js

Exporting default webpack config for Client and rootDir of cwd() using getWebpackConfig. If nuxt.config.js is in current working dir (ide project root for example) it will be also correctly loaded. Some external tools may need access to the resolved webpack config as a file, for example, IDEs or command-line tools that expect a webpack config path.

getWebpackConfig(name, options)

import { getWebpackConfig } from 'nuxt'

getWebpackConfig()
getWebpackConfig('server', { rootDir: '...' })

• options type is loadOptions used for new programatic feat: improve programatic usage #6868 interface

This function returns a Promise which loads project config, creates an instance of nuxt internals, runs modules for extending webpack config with the final result of exactly what Nuxt internally using! Webpack supports Exporting a Promise so it is also a valid webpack config.

History

• Expose webpack config for ESLint #200
• Expose resolved webpack config for external tool #4286
• feat(webpack): export webpack's config builder classes #5366
• feat(webpack): Expose webpack base config class #5425
• refactor(webpack): add ability to get webpack config class #5378

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[codecov-io]

Codecov Report

Merging #7029 into dev will increase coverage by 0.23%.
The diff coverage is 76.78%.

@@            Coverage Diff             @@
##              dev    #7029      +/-   ##
==========================================
+ Coverage   62.46%   62.69%   +0.23%     
==========================================
  Files          82       84       +2     
  Lines        3322     3375      +53     
  Branches      901      919      +18     
==========================================
+ Hits         2075     2116      +41     
- Misses       1001     1013      +12     
  Partials      246      246

Flag	Coverage Δ
#unittests	62.69% <76.78%> (+0.23%)	⬆️

Impacted Files	Coverage Δ
packages/cli/src/command.js	98.33% <0%> (-0.84%)	⬇️
packages/cli/src/utils/webpack.js	0% <0%> (ø)
packages/cli/src/commands/index.js	9.09% <0%> (-0.91%)	⬇️
packages/webpack/src/builder.js	8.57% <0%> (ø)	⬆️
packages/utils/src/resolve.js	96.36% <100%> (+0.06%)	⬆️
packages/cli/src/commands/webpack.js	93.18% <93.18%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5781c6e...cf76465. Read the comment docs.

[galvez]

Great use of Nuxt commands! :)

[flozero]

Is it any doc for it ? I had to in the core code to check exactly i can use to get dev client config ^^.

{for: 'dev'}

Thank's for your work anyway that help a lot !

[pi0]

@f3ltron If you have time to contribute to docs it would be more than welcome 🤗

[flozero]

i can add some yeah. I just don't know where to put it ^^

[pi0]

@manniL May give some advice for best place to add :)