I am writting a webpack plugin (for version 4.41.5) in order to do the following job before the "real compile" time:
search the all file with the pattern like **/foo/index.page.vue, **/bar/index.page.vue, **/index.page.vue, get the path of those files, then generate javascript code like below and finally insert them into the corresponding code.

[
  {
    name: "foo"
    path: "/foo",
    component: import(/* webpackChunkName: "foo" */ "[any-path-prefix]/foo/index.page.vue"),
  },
  {
    name: "bar"
    path: "/bar",
    component: import(/* webpackChunkName: "bar" */ "[any-path-prefix]/bar/index.page.vue"),
  },
  ...
];

the plugin should be invoke in both product and development mode only once in each compile or re-compile time. so which hook should I choose in best practice?

I tried to invoke the plugin in the "before-compile" hook. I don't konw if it is the best hook but this hook seems to be invoked too much times in compiling at product mode. my code is like

function RegisterRoutePlugin(config) {
  // do something...
}
RegisterRoutePlugin.prototype.apply = function (compiler) {
  compiler.plugin('before-compile', (compilation, callback) => {
     // do something...
     callback()
  })
}