Working with frameworks

Framework-specific tooling

Most frameworks (React, Vue, Angular) provide scaffolding tools that pre-configure Webpack. Understanding Webpack helps you customize these configurations. Vue CLI and Angular CLI wrap Webpack, while create-react-app is deprecated in favour of tools such as Vite or Next.js. Custom Webpack configs extend framework defaults.

Extend React configuration

Use CRACO or react-app-rewired to customize create-react-app Webpack config.

// craco.config.js
module.exports = {
  webpack: {
    configure: (config) => {
      config.optimization.minimize = false;
      return config;
    }
  }
};

Output:

Customize CRA Webpack configuration without ejecting

Ejecting as last resort

Avoid ejecting from create-react-app unless necessary. Ejecting exposes all config and you own maintenance. Use overrides, plugins, or alternative tools first. If you need full control from the start, consider Vite or Next.js.

Quick check

Quick check: What is a benefit of using framework CLIs?

• Faster runtime performance.
• Smaller bundle sizes guaranteed.
• They remove the need for Node.js.
• Pre-configured Webpack for the framework's needs.