refactor(schema,webpack)!: split out webpack and postcss build options

[danielroe]

🔗 Linked issue

resolves nuxt/nuxt#12853

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR refactors the webpack bundler implementation out of a class, splits out vite, webpack & postcss options as top-level config items, and changes how you set the builder (build.builder can be vite, webpack, or a custom object with a bundle() method).

It also now shares postcss plugin configuration between webpack & vite, meaning that cssnano is added to the vite preset.

👉 Migration steps

Update builder option

If you are using webpack, you will need to update your nuxt.config:

  import { defineNuxtConfig } from 'nuxt3'

  export default defineNuxtConfig({
-   vite: false,
+   builder: 'webpack'
  })

You will also now need to install the webpack builder separately. Add this to package.json:

{
  "devDependencies": {
    "@nuxt/webpack-builder": "npm:@nuxt/webpack-builder-edge@latest"
  }
}

Update postcss plugins

If you have configured your postcss plugins separately, you will now need to do so through a new top-level config option. This will apply to both webpack & vite builders.

  import { defineNuxtConfig } from 'nuxt3'

  export default defineNuxtConfig({
-   build: {
-     postcss: {
-       postcssOptions: {
-         plugins: {
-           'postcss-import': {}
-         }
-       }
-     }
-   },
+   postcss: {
+     plugins: {
+       'postcss-import': {}
+     }
+   }
  })

📝 TODO

• I have linked an issue or discussion.
• Remove babel code/dependencies from webpack implementation (or re-enable)
• Finish refactor (can be made cleaner)
• I have updated the documentation accordingly.

[netlify]

✔️ Deploy Preview for nuxt3-docs canceled.

🔨 Explore the source changes: 710942f

🔍 Inspect the deploy log: https://app.netlify.com/sites/nuxt3-docs/deploys/6218ff5c635dcd000749a227

[atinux]

We may want to list it into https://github.com/nuxt/framework/discussions/2883 as well

[pi0]

I hope this works :D (resolution of tryImportModule is CJS)