Evolution of Build-Scripts: Architecture, Plugins, and Multi-Task Configuration for Frontend Projects

In ICE and Rax projects we often use build-scripts, a unified build scaffold that provides start, build and test commands and a flexible plugin system.

This article walks through the architectural evolution of build-scripts through a series of scenarios, from a simple webpack‑based project (project‑a) to shared configuration, npm packaging, user‑defined build.json, plugin mechanisms, integration of webpack-chain, and multi‑task support.

Initial example project structure:

project-a
  |- /dist
  |   |- main.js
  |- /src
  |   |- say.js
  |   |- index.js
  |- /scripts
  |   |- build.js
  |- package.json

After copying the webpack config to project‑b, the build command is updated to use the shared package.

To avoid manual copying, the configuration is extracted into an npm package build-scripts with a CLI entry bin/build-scripts.js and a TypeScript build command.

#!/usr/bin/env node
const program = require('commander');
const build = require('../lib/commands/build');
program.command('build').description('build project').action(build);
program.parse(process.argv);

User configuration is introduced via build.json allowing overrides of entry and outputDir. The ConfigManager class merges user config with default config and validates values.

class ConfigManager {
  // …
  registerUserConfig(configs) { … }
  async setup() {
    this.getUserConfig();
    await this.runUserConfig();
  }
}

Plugins are added to extend the webpack configuration, e.g., build-plugin-xml adds an XML loader.

module.exports = async (webpackConfig) => {
  if (!webpackConfig.module) webpackConfig.module = {};
  if (!webpackConfig.module.rules) webpackConfig.module.rules = [];
  webpackConfig.module.rules.push({
    test: /\.xml$/i,
    use: require.resolve('xml-loader')
  });
};

To simplify configuration manipulation, webpack-chain is adopted, converting the default config into a chainable API.

const Config = require('webpack-chain');
const buildConfig = new Config();
buildConfig.entry('index').add('./src/index');
buildConfig.module.rule('ts').test(/\.ts?$/).use('ts-loader').loader(require.resolve('ts-loader'));

Further refactoring decouples the default configuration from the core by exposing setConfig, registerUserConfig, and onGetWebpackConfig callbacks to plugins.

Finally, multi‑task support is added: each task registers a named webpack chain, plugins can target specific tasks, and the CLI runs all tasks via webpack([...]).

const compiler = webpack(manager.configArr.map(c => c.chainConfig.toConfig()));

The article concludes that build-scripts provides a flexible, plugin‑driven configuration management solution suitable for any frontend project.