conflict with add-asset-html-webpack-plugin package

[GoToBoy]

both use speed-measure and add-asset-html , would cause

compiling Cannot read property 'toPromise' of undefined

i don't know why ,

[GoToBoy]

[darrell0904]

Is this problem has been solved?

[stephencookdev]

No, I've not had a chance to look at this issue yet @darrell0904 - I would appreciate any PRs!

[joyerli]

在我的项目中我解决了该问题.

该问题的原因是由于, smp在每次webpack插件调用时, compiler, compilation中的hooks对象都返回一个新的, 代码:

const wrapped = Object.keys(hooks).reduce((acc, method) => {
    acc[method] = genProxy(method);
    return acc;
  }, {});

这会导致在某个插件中对hooks添加一个新的hook, 但由于hooks是smp返回的一个新的对象, 对其设置的新的hook在其他的插件都获取不到(不同同一个对象), 因此解决方案是hooks返回原有对象, 不要创建新的对象, 比较小的改动为:

  const wrapped = Object.keys(hooks).reduce((acc, method) => {
    acc[method] = genProxy(method);
    return acc;
  }, hooks);

也可以使用Proxy代理:

const wrapped = new Proxy(hooks, {
    get(target, property) {
      if (!target[property]) {
        return target[property];
      }
      return genProxy(property)
    },
    set: (target, property, value) => {
      return Reflect.set(target, property, value);
    },
    deleteProperty: (target, property) => {
      return Reflect.deleteProperty(target, property);
    },
  });

这样就可以在vue-cli@3, vue-cli@4中使用了, 和使用html-webpack-plugin系列插件中使用了.

English is not good. Here is Google translation.

I solved the problem in my project.

The reason for this problem is that every time SMP calls the webpack plug-in, the "hooks" object in the "compiler" and "compilation" returns a new one, Code:

const wrapped = Object.keys(hooks).reduce((acc, method) => {
    acc[method] = genProxy(method);
    return acc;
  }, {});

This will cause a new hook to be added to hooks in a plug-in, but because hooks is a new object returned by SMP, the new hook set to it cannot be obtained by other plug-ins (different from the same object), so the solution is that hooks returns the original object, do not create a new object, the smaller change is

  const wrapped = Object.keys(hooks).reduce((acc, method) => {
    acc[method] = genProxy(method);
    return acc;
  }, hooks);

it is recommended to use a 'proxy' proxy

const wrapped = new Proxy(hooks, {
    get(target, property) {
      if (!target[property]) {
        return target[property];
      }
      return genProxy(property)
    },
    set: (target, property, value) => {
      return Reflect.set(target, property, value);
    },
    deleteProperty: (target, property) => {
      return Reflect.deleteProperty(target, property);
    },
  });

In this way, it can be used in 'vue-cli @ 3', 'vue-cli @ 4', and use 'HTML webpack plugin' series plug-ins

[yft]

Is there any plan to fix this problem?