Testing and CI/CD integration

Build in CI pipelines

CI/CD pipelines run Webpack builds in controlled environments. npm scripts in package.json trigger builds. Set CI environment variables to customize build behavior (e.g., CI=true). Generate build artifacts, reports, and sourcemaps. Store bundles for deployment. Unit tests may mock Webpack configuration.

CI/CD build script

Typical npm scripts for CI builds.

{
  "scripts": {
    "build:dev": "webpack --mode development",
    "build:prod": "webpack --mode production",
    "build:ci": "CI=true npm run build:prod",
    "test": "jest --coverage",
    "lint": "eslint src/**/*.js"
  }
}

Output:

CI runs: npm run lint && npm run test && npm run build:ci

Analyze bundles in CI

Use webpack-bundle-analyzer to generate visual reports of bundle composition. Store reports as CI artifacts. Set bundle size limits and fail builds if exceeded. This catches performance regressions early.

Quick check

Quick check: Why analyze bundles in CI?

• To make builds faster.
• To catch performance regressions early.
• To reduce deployment time.
• To automatically fix lint errors.