RelativeCI

In-depth webpack bundle analysis and monitoring

Configure @relative-ci/agent webpack plugin

Step 1. Install

npm install --save-dev @relative-ci/agent
yarn add --dev @relative-ci/agent
pnpm add -D @relative-ci/agent

Step 2. Configure Webpack

Add RelativeCiAgentWebpackPlugin plugin to your webpack config:

webpack.config.js
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
module.exports = {
// ... your webpack config
plugins: [
// ... other plugins
new RelativeCiAgentWebpackPlugin()
]
};

Next.js config

next.config.js
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
module.exports = {
webpack: function (config, options) {
const { dev, isServer } = options;
if (!dev && !isServer) {
config.plugins.push(
new RelativeCiAgentWebpackPlugin(),
);
}
return config;
}
};

Gatsby config

gatsby-node.js
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
exports.onCreateWebpackConfig = ({ stage, actions }) => {
if (stage === 'build-javascript') {
actions.setWebpackConfig({
plugins: [
new RelativeCiAgentWebpackPlugin()
]
});
}
};

Create React App

To setup @relative-ci/agent webpack plugin with create-react-app, you need to customize the default webpack config. That can be done by using react-app-rewired which is one of create-react-app's custom config solutions. You will also need customize-cra.

npm install --dev customize-cra react-app-rewired
yarn add --dev customize-cra react-app-rewired
pnpm add -D customize-cra react-app-rewired

Change your default scripts in package.json to:

package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
}

Create a file config-overrides.js at the same level as package.json.

config-overrides.js
const { override, addWebpackPlugin } = require('customize-cra');
const { RelativeCiAgentWebpackPlugin } = require('@relative-ci/agent');
module.exports = override(
addWebpackPlugin(new RelativeCiAgentWebpackPlugin()),
);


Need help configuring @relative-ci/agent for another framework?Contact us via email, Twitter, or GitHub!

Plugin options

  • enabled - send the stats to RelativeCI (default to env-ci isCi)

  • includeCommitMessage - will include git commit message (default true)

  • payloadFilepath - save agent payload to disk for debugging

  • stats - Webpack stats options, default:

    {
    stats: {
    assets: true,
    chunks: true,
    modules: true,
    }
    }

Step 3. Configure Continuous Integration(CI) service

The plugin sends the webpack stats to RelativeCI when enabled option is true. On supported CI services, the option is enabled by default and the agent is going to send the webpack stats automatically during the webpack build task.

If you run multiple build tasks as part of your CI flow, make sure to enable the plugin only for one task.

If you are building your project using GitHub Actions on pull_request event or if you rely on workflows triggered by forked repos, consider using the Agent GitHub action.

Add environment variables

RELATIVE_CI_KEY

(Required) Navigate to https://app.relative-ci.com, go to the project Settings -> API Keys page and copy the project API key.

RELATIVE_CI_SLUG

(Required for unsupported CI services) Set your GitHub project slug (eg: webpack/webpack.js.org) if your CI service is not supported (https://github.com/semantic-release/env-ci#supported-ci).

RELATIVE_CI_ENDPOINT

(Required for Enterprise Cloud customers)




Need help?Contact us via email, Twitter, or GitHub!

Start analyzing and monitoring yourwebpack bundle