External Source Maps for Development and Production

Show how to configure external source maps differently for development and production environments to balance build performance and debugging capabilities.
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).