Configuration and modes

Development vs production

Development mode disables optimizations for readability and fast rebuild times. Sourcemaps are generated. Production mode enables code minification, tree-shaking, and scope hoisting. Choose mode based on your current task. You can override settings per environment.

Environment-based configuration

Use environment variables to switch configurations.

module.exports = (env, argv) => {
  const isDev = argv.mode === 'development';
  
  return {
    mode: argv.mode || 'production',
    devtool: isDev ? 'source-map' : false,
    optimization: {
      minimize: !isDev,
      usedExports: true
    }
  };
};

Output:

Configuration adjusts based on build mode parameter

Sourcemaps for debugging

Enable sourcemaps in development with 'source-map' or 'eval-source-map'. Sourcemaps map bundled code back to original sources for easier debugging. Disable in production to keep bundle size small.

Quick check

Quick check: When should you use production mode?

• During development for fast rebuilds.
• To enable better debugging.
• For final deployments to minimize bundle size.
• Only when running unit tests.