Webpack Quick Start (NextJS, Angular, CRACO)

Quick start guide for Codecov Bundle Analysis and Webpack.

Step 1: Install the Codecov Webpack Plugin

Install the @codecov/webpack-plugin to your project.

npm install @codecov/webpack-plugin --save-dev
yarn add @codecov/webpack-plugin --dev
pnpm add @codecov/webpack-plugin --save-dev

Step 2: Configure the bundler plugin

Import the bundler plugin, and add it to the end of your plugin array found inside your webpack.config.js file.

For NextJS users, please see their docs for configuring Webpack inside the next.config.js file here.

Note: You can find your global upload inside your org settings on Codecov

// webpack.config.js
const path = require("path");
const { codecovWebpackPlugin } = require("@codecov/webpack-plugin");

module.exports = {
  /* ... */
  plugins: [
    // Put the Codecov Webpack plugin after all other plugins
    codecovWebpackPlugin({
      enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
      bundleName: "<bundle project name>",
      uploadToken: process.env.CODECOV_TOKEN,
    }),
  ],
};

Step 3: Commit and push your latest changes

The plugin requires at least one commit to be made to properly upload bundle analysis information up to Codecov.

git add -A && git commit -m "Add Codecov bundler plugin" && git push

Step 4: Build the application

When building your application the plugin will automatically upload the stats information to Codecov.

npm run build
yarn run build
pnpm run build