Application Bundling with Webpack

Webpack is a modular asset bundler used to build VA.gov client applications. Its responsibilities include:

  • Dependency resolution in JavaScript and CSS files

  • Splitting the project into application specific and shared resources during the build process

  • Enabling support for legacy web browsers

  • Performance optimization

  • Providing the application launch behavior that ties all of this together

Our Webpack configuration leverages the CommonsChunkPlugin to code split source code into:

  • Entry files that are application specific e.g. facilities-locator.entry.js

  • A vendor.js file containing common modules shared between entry points

Webpages load application specific files on demand. More information on this can be found in Webpack’s code splitting documentation.

Common bundles

Directory Structure of vets-website

  • /config

    • Cypress End-to-End configurations:

      • cypress-reporters.json

      • cypress-testrail.json

      • cypress.json

    • Nightwatch.js End-to-End test runner and configurations:

      • nightwatch-globals-sauce.js

      • nightwatch-sauce.js

      • nightwatch.docker-compose.js

      • nightwatch.js

    • Sass configuration: sass-lint.yml

    • Webpack production and development configurations:

      • webpack.config.js

      • webpack.dev.config.js

  • /docs: Best practices and troubleshooting documents

  • /jenkins: Jenkins setup, build, and deploy scripts for the vets-website repository

  • /script

    • /component-migration: Scripts for migrating React components to web components

    • /eslint-plugin-va: Project specific linting plugin

    • /github-actions: Scripts used in GitHub Actions workflows

    • app-coverage-report.js: Generates coverage report for all applications in the repository

    • app-list.sh: Outputs a list of the applications in vets-website

    • build-help.js: Used in the watch.js script for outputting CLI options

    • build.sh: Builds vets-website applications

    • can-i-deploy.js: Used for verifying if changes can be deployed in Pact Broker contract tests

    • check-node-version.js: Checks if the necessary node version is installed

    • install-repos.sh: Clones sibling repositories needed for running the entire site locally

    • mocha.js: Unit test runner and watch task

    • pr-check.js: Used in CI to determine if platform-release-tools should be requested in a PR

    • pre-push.sh: Checks if new commits have been added to a git branch based off of main

    • prebuild.js: npm pre-build script that checks the node version and installs pre-commit hooks

    • publish-pacts.js: Publishes and tags pacts generated by Pact Broker tests

    • reset-environment.js: Installs yarn and removes Babel cache and node_modules directory

    • review-entrypoint.sh: Builds and serves the site in review instance setup

    • run-cypress-tests-docker.js: Used for running Cypress tests in a Docker container

    • run-docker-nightwatch.sh: Runs mock vets-api in a Docker container

    • run-mockapi.sh: Runs mock API server

    • run-nightwatch.sh: Test harness for running Nightwatch.js tests

    • run-review-instance-api.js: Runs a local build that points to a review instance API

    • run-unit-test-help.js: Outputs CLI options for run-unit-test.js script

    • run-unit-test.js: Runs unit tests

    • security-check.js: Checks for security advisories in dependencies

    • update-json-schema.sh: Helper for updating dependency version of vets-json-schema

    • utils.js: Utility functions used throughout the repository

    • watch-tests.js: Watch task for unit tests (proof of concept)

    • watch.js: Starts the Webpack dev server

  • /src: Source files for vets-website applications

    • /applications: Application specific code that gets bundled in Webpack

    • /platform: Shared code that includes polyfills, code thats injected directly into the site, or used for testing

    • /site: Contains assets used in applications, and constants used throughout the repository

  • Runtime configs used locally and in CI for builders, dependency managers, linters, transcoders, and source control

    • Babel: .bablerc

    • Docker: .dockerignore, Dockerfile, docker-compose.yml

    • ESLint: .eslintrc, .eslintignore

    • git: .gitignore

    • nvm: .nvmrc

    • Prettier (used with ESLint): .prettierrc

    • Yarn: .yarnrc, yarn.lock, package.json

  • json-config-example.json: IntelliSense configuration for supporting babel-plugin-module-resolver