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

该问题的原因是由于, 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

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

Description

Activity

GoToBoy commented on Oct 31, 2019

darrell0904 commented on Feb 21, 2020

stephencookdev commented on Feb 22, 2020

joyerli commented on Mar 27, 2020

yft commented on Jul 1, 2021

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Participants

Issue actions