Skip to content

Latest commit

 

History

History
103 lines (69 loc) · 4.81 KB

README.md

File metadata and controls

103 lines (69 loc) · 4.81 KB
Raw

Configuration

webpack-bundle-delta has been designed to be zero-config.

The default configuration will load up all the built in plugins, and can be seen in allPlugin.ts.

We use cosmiconfig to allow for specifying and customising the setup:

  • Configuration can be specified in package.json, or .webpackBundleDeltarc, or webpackBundleDelta.config.js as an example
  • If specifying in package.json, use the property webpackBundleDelta to specify the configuration

Configuration object

The object only has 3 properties:

Extending

Configurations can be extended from other configurations.

Default behaviour

By default, when extends is not provided, it will use the inbuilt configuration from allPlugins.ts.

Disabling default behaviour

To disable default behaviour, set extends to a falsy/null value

{
  "extends": null,
  "plugins": [
    // specify your plugins + configurations here
  ]
}

Extending a package

If extends is specified, it will be required accordingly, and then merged with the specified configuration.

{
  "extends": "@company/webpack-bundle-delta-config",
  "plugins": [
    // optional array of specific plugin configurations to be merged on top of the extending configuration
  ]
}

Packages can also export multiple configurations.

const customConfig = require('./some-custom-config');
const anotherConfig = require('./another-config');

module.exports {
  custom: customConfig,
  another: anotherConfig,
};

Which can then be referenced using :<named export>

{
  "extends": "@company/webpack-bundle-delta-config:custom",
  "plugins": [
    // optional array of specific plugin configurations to be merged on top of the extending configuration
  ]
}

Globals

Globals are used to define values across all plugins. This is mainly used for showExisting and chunkFilename.

Plugin configurations can also define these values which will override the global values.

showExisting

showExisting will cause all plugins to show existing recommendations when available.

chunkFilename

With some of our plugins such as size-changes and trace-changes we make use of the chunk names as identifiers.

However, chunk names work in one of two ways:

Given the latter can happen (is the default behavior) and webpack allows for custom chunk file names, the string used for determine the chunk file name needs to be known to webpack-bundle-delta.

The default value for chunkFilename aligns with webpack's default, however if your application's webpack specifies differently, it needs to be specified.

As an example, Facebook's create-react-app has a custom webpack configuration, and specifies chunkFilename: 'static/js/[name].[contenthash:8].chunk.js'.

From this provided string, we will compare it against the asset.name, and substitute out any hash tokens specified. In facebook's example, an asset.name might be static/js/2.c46713e0.chunk.js, which will get converted to static/js/2.[contenthash:8].chunk.js.

Taking the example a step further, if your compilation outputted by js and mjs, you could replace the js with a different token, say [ext]... meaning 'static/js/[name].[contenthash:8].chunk.[ext]'. In general, we are only concerned about the "hash" tokens, so whatever other tokens is provided will not substitute in, but is necessary for the regular expression matching that is performed.

In the event the provided chunkFilename does not match, we will simply use the asset.name, but this means the calculation for the delta would not be performed and simply show up as files being added/removed for every run.