External Source Maps for Development and Production

const path = require('path');
const webpack = require('webpack');

module.exports = (env, argv) => {
  // Check the mode (production or development)
  const isProduction = argv.mode === 'production';

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/'
    },
    devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
    // More webpack configuration...
  };
};

This webpack configuration file exports a function that accepts the environment and argv parameters. Inside the function, it checks if the mode is set to production. Based on the mode, it configures the 'devtool' property to use 'source-map' for production environments and 'cheap-module-source-map' for development, which are both external source map types but with different trade-offs. The 'source-map' option provides higher quality source maps but with a slower build time (suitable for production), while the 'cheap-module-source-map' provides faster builds with lower quality maps (suitable for development).