Webpack's build modes (development/production)

The packaging mode (development/production) in Webpack is one of the most core configurations in the build process, directly affecting code optimization, debugging experience, and the final output bundle size. Different modes enable different built-in optimization strategies in Webpack, and developers need to flexibly choose based on the project phase.

Development Mode Features

Development mode primarily focuses on debugging convenience and build speed. When mode: 'development' is set, Webpack enables the following features by default:

1. Source Maps: Generates high-quality source maps for easier debugging.

// webpack.config.js
module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map' // Default value
}

2. Unoptimized Code: Preserves original module names and identifiers.

// Output retains original variable names and comments
function sum(a, b) {
  // Addition function
  return a + b;
}

3. Live Reloading: Works with webpack-dev-server to enable HMR.

devServer: {
  hot: true, // Enabled by default in development mode
  liveReload: true
}

4. Development-Specific Plugins:

• NamedModulesPlugin shows module relative paths.
• NamedChunksPlugin preserves chunk names.

Production Mode Optimizations

Production mode (mode: 'production') enables a series of optimization measures:

1. Code Minification: Uses TerserWebpackPlugin for multi-dimensional compression.

// Automatically configured optimizations in production mode
optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()],
  concatenateModules: true
}

2. Scope Hoisting:

// Before transformation
import { cube } from './math.js';
console.log(cube(5));

// After transformation
console.log((function(n){return n*n*n})(5));

3. Tree Shaking: Eliminates unused code.

// math.js
export function square(x) { return x * x; }
export function cube(x) { return x * x * x; }

// index.js
import { cube } from './math.js'; // square will be removed

4. Environment Variable Injection:

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
})

Mode Comparison

Custom Mode Configuration

You can dynamically set the mode using environment variables:

// package.json
{
  "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack serve --mode=development"
  }
}

You can also create derived configurations:

// webpack.config.js
module.exports = (env) => {
  const isProd = env.production;
  return {
    mode: isProd ? 'production' : 'development',
    plugins: [
      isProd ? new ProdPlugin() : new DevPlugin()
    ]
  };
};

Advanced Mode Switching Techniques

1. Differentiated Configuration:

const config = {
  mode: process.env.NODE_ENV,
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        process.env.NODE_ENV === 'development' ? 
          'style-loader' : 
          MiniCssExtractPlugin.loader,
        'css-loader'
      ]
    }]
  }
}

2. Hybrid Mode Configuration:

// Enable production-level compression in development
module.exports = {
  mode: 'development',
  optimization: {
    minimize: true,
    usedExports: true
  }
}

3. Environment Variable Expansion:

// Use cross-env for cross-platform setup
// package.json
{
  "scripts": {
    "build:stage": "cross-env NODE_ENV=staging webpack"
  }
}

Common Issue Solutions

Issue 1: Forgetting to switch to production mode.

// Solution: Add validation logic
if (process.env.NODE_ENV !== 'production') {
  console.warn('Building in non-production mode!');
}

Issue 2: Poor performance in development mode.

// Solution: Adjust devtool configuration
devtool: process.env.NODE_ENV === 'development' ? 
  'eval-cheap-source-map' : 
  false

Issue 3: Third-party library mode detection conflicts.

// Solution: Explicitly set global variables
new webpack.DefinePlugin({
  __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production')
})

Performance Optimization Practices

1. Development Mode Speedup:

cache: {
  type: 'filesystem',
  buildDependencies: {
    config: [__filename] // Invalidate cache on config file changes
  }
}

2. Production Mode Deep Optimization:

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    maxSize: 244000
  },
  runtimeChunk: 'single'
}

3. CSS Handling Differences:

{
  test: /\.s[ac]ss$/i,
  use: [
    // Use style-loader for HMR in development
    mode === 'development' ? 'style-loader' : {
      loader: MiniCssExtractPlugin.loader,
      options: { publicPath: '../' }
    },
    'css-loader',
    'sass-loader'
  ]
}