Watch/build a specific entry point

[jaymcp]

The feature

Say, for example, that I have three entry points in a project:

• frontend.js
• editor.js
• admin.js

If I'm working on a frontend module, I likely will not need to rebuild admin.js or editor.js when making changes, as their scopes are separate from the code I'm working on. Therefore, watching and building their respective trees is unnecessary overhead in terms of both time and system resources.
This is especially true of gutenberg-related code which, in my experience, is where the most significant proportion of time is spent on a build task. On one of my projects (that isn't currently using build-tools), removing the gutenberg entry point from the Webpack build cuts the build time down by approx 66%.

It would be great if I could pass a parameter to the watch/build task to declare only the entry point(s) I want to target when I'm working on a specific feature; e.g. --entry=frontend.

[jaymcp]

From some initial research into this, it sounds like Webpack intelligently watches files; so, at face value, it seems that only the list of entries would need to be built on demand (if the flag is set). I've been playing around with this in raw Webpack on an existing project:

const path = require('path');

/**
 * Filter entry points if specified in cli
 * @param {Object} env cli env vars
 * @returns {Object}
 */
const getEntries = (env) => {
  const entries = {
    frontend: path.resolve(__dirname, './src/scripts/frontend.js'),
    editor: path.resolve(__dirname, './src/scripts/editor.js'),
    admin: path.resolve(__dirname, './src/scripts/admin.js'),
  };

  if (!env?.entry) {
    return entries;
  }

  let entry = {};

  env.entry.split(',').map((name) => {
    if (Object.hasOwnProperty.call(entries, name)) {
      entry[name] = entries[name];
    }
  });

  return entry;
};

const config = (env, argv) => ({
  // …
  entry: getEntries(env),
  // …
});

Running the following command(s) filters out the list of entries to the ones I specify:

webpack --mode development --watch --env entry=frontend # or
webpack --mode development --watch --env entry=frontend,admin

I don't know how much of that will be applicable to this package, but I thought it might perhaps be somewhat useful.

[ampersarnie]

I've had a thought on how this can be utilised when building multiple projects, implementation should be easy but from the CLI perspective we can do something like the following from the root:

build-tools build --once my-plugin@frontend+editor,my-theme@frontend

Here we can target completely seperate entry points for multiple projects, so for this the following files can be targetted by the build.

• plugins/my-plugin/src/entrypoints/frontend.js
• plugins/my-plugin/src/entrypoints/editor.js
• themes/my-theme/src/entrypoints/frontend.js

A entrypoint delimeter would need to be + in this case as , is being used for the project listing itself. The @ would allow us to define specific entrypoints for a given package and make it easier for the script to pick up and parse. While I'm not completely sold on using + here, it does offer a distinct sperator.

The reason I'm thinking of going down this route is there's definitely argument to request specific projects compile different entrypoints in a given run. In the above case there is no need to run a build on my-theme/src/entrypoints/editor.js, if it even exists.

I do however need to consider how this might fit with a single project build from the root of that project.

[ampersarnie]

Flagging here that @con322 is working on some ideas on this so it is assigned to him. Moving out of blocked.

[con322]

Been a long time coming but finally got round to coming up with a solution for this, created a PR (#120) which does contain a couple of questions. Be great if someone could take a look an provide some initial feedback.